Question

我需要在某个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>

Answer 1

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

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

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

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;
  }
}

Answer 2

我认为这是你正在寻找的东西：

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

使用clip属性可以指定一个矩形来剪切绝对定位的元素。矩形被指定为四个坐标，全部来自要剪裁的元素的左上角。

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

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

在响应式网站中调整img

2 个答案: