在响应式站点中调整图像大小答案

【问题标题】：resize img in responsive site在响应式站点中调整图像大小
【发布时间】：2015-12-30 14:45:47
【问题描述】：

我需要在某个 div 内设置图像的图像大小。我可以直接从 html 设置大小，但该网站是响应式的，我需要一些“特殊功能”。我需要当容器 div 高度为 350px 时，它会停止垂直收缩，并开始水平裁剪。我不能使用背景图像，并且使用最小高度它不能正确调整大小...... 我已经试过了：

CSS

#rslides_container {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    min-height: 350px;
}

.rsimgsize {
    width:100%;
    height:auto;
    overflow: hidden;
}

HTML

<div id="rslides_container">
    <ul class="bxslider">
        <li>
            <img src="images/teste/cabeca.png" class="rsimgsize"  />
            <p class="caption">With the Flight Support Department, you can assure more than one service, that it will help you to save time.</p>
        </li>
        <li>
            <img src="images/teste/cabeca2.png" class="rsimgsize"  />
            <p class="caption">With the Flight Support Department, you can assure more than one service, that it will help you to save time.</p>
        </li>
        <li>
            <img src="images/teste/cabeca.png" class="rsimgsize" />
            <p class="caption">With the Flight Support Department, you can assure more than one service, that it will help you to save time.</p>
        </li>
        <li>
            <img src="images/teste/cabeca2.png" class="rsimgsize" />
            <p class="caption">With the Flight Support Department, you can assure more than one service, that it will help you to save time.</p>
        </li>
    </ul>
</div>

【问题讨论】：

你的意思是当图像达到他的正常大小时就不会了？
@thommylue 号，他的正常尺寸是 1500x450。我希望当容器达到 350 高度时，img 停止调整大小，但容器继续......我希望 img 高度固定在 300px（容器有一条 50px 底部白线），容器高度固定在 350px，但是容器宽度会随着页面继续缩小（图像大小现在是固定的，并且有溢出）......
在下面查看我的答案:)

标签： html css image resize

【解决方案1】：

我在这里为您的代码制作了一个更简单的版本，以显示我认为您想要的内容。

这里的关键是将图像设置为具有100% 的max-width，然后更改图像容器的大小。

然后您可以使用媒体查询来更改容器大小，这将自动更改图像的大小。

http://codepen.io/anon/pen/JYWKBo

#rslides_container {
    position: relative;
    float: left;
    width: 100%;
    height: auto;
    min-height: 350px;
}

.bxslider{
  list-style: none;
}

.bxslider li{
  display: inline-block;
  width: 150px;
}

.bxslider li img {
    max-width: 100%;
}

@media screen and (max-width: 767px) {
  .bxslider li{
    display: block;
    width: 400px;
  }
}

【讨论】：

【解决方案2】：

我想这就是你要找的东西：

img {
    position: absolute;
    clip: rect(0px,60px,200px,0px);
}

clip 属性允许您指定一个矩形来裁剪绝对定位的元素。矩形被指定为四个坐标，全部从要剪切的元素的左上角开始。

如果图像超出父元素，只需添加相对于父元素。

http://www.w3schools.com/cssref/pr_pos_clip.asp

【讨论】：