我有一堆图像在div中一次显示一次。图像都是几千像素乘几千像素。

例如,一张图像是4353x2721。

当我预览页面时,它会放大图片并仅沿顶部和底部边缘切出东西。它保持正确的宽度。

我只需要调整它的大小即可使其适合屏幕/ div,而不会切割任何零件。

该部分的CSS是:

.largeImage img {
    position:absolute;
    top:0;
    left:0;
    width:100%;
}


如果添加height:100%;,它仍然不起作用。仍会放大。

最佳答案

您需要为图像设置max-width: 100%max-height: 100%。它将使图像适应其较大尺寸以适应父容器限制,并缩小其他尺寸。

查看代码段:



.largeImage {
  width: 150px;
  height: 200px;
  display: inline-block;
  position: relative;
  border: 1px solid green;
}

.largeImage img {
    display: block;
    position:absolute;
    top:0;
    left:0;
    right: 0;
    margin: 0 auto;
    max-width:100%;
    max-height:100%;
}

<div class="largeImage">
  <img src="http://lorempixel.com/output/food-q-c-640-480-5.jpg">
</div>

<div class="largeImage">
  <img src="http://lorempixel.com/output/nature-h-c-640-1233-7.jpg">
</div>

09-25 16:45
查看更多