欢迎使用CSDN-markdown编辑器

不同宽高比实现等宽等高设计

 图片两张，规格分别是：768×568 和 500×425 现在的要求是：响应式布局下，让他们等宽等高显示 做法：      以500×425 的图片为基准 撑开父盒子的宽度      另一张图片：包裹图片的盒子 依据父盒子相对定位 高度100% 且作为背景图片，最为重要的就是 尺寸不一致 需要用到padding来挤压 使得图片呈现等宽等高。

html

html部分：

 <div class="outer-wrap-shop clearfix">            <section class="half-side-section left-side-section">                <a href="/t/limited-edition">                    <img class="half-side-img" src="left.jpg"/>                </a>            </section>            <section class="half-side-section right-side-section">                <a href="javascript:;">                    <img class="half-side-img" src="right.jpg"/>                </a>            </section>        </div>

css:部分

.outer-wrap-shop {    position: relative;    margin: 0 2em;    .half-side-section {        width: 50%;        &:hover, &:active {            color: $noir;        }        &:hover {            .half-side-img {                opacity: 0.5;            }        }    }    .left-side-section {        position: absolute;        top: 0;        left: 0;        height: 100%;        box-sizing: border-box;        padding: 5%;        img{            display:block;            height: 100%;        }    }    .right-side-section {        box-sizing: border-box;        padding: 5%;        float: right;        a{            display: block;            position: relative;        }        .half-side-img{            display: block;        }    }}

最终是实现 488×414 等宽等高。