Question

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

例如，一张图像是4353x2721。

当我预览页面时，它会放大图片并仅沿顶部和底部边缘切出一些东西。它仍然是正确的宽度。

我需要它只是调整大小以使其适当地适合屏幕/ div而不切割任何部分。

该部分的CSS是：

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

如果我添加height:100%;，它仍然无效。仍然放大。

Answer 1

您需要为图片设置max-width: 100%和max-height: 100%。它将使图像适合其大容量限制并缩小其他维度。

看一下片段：

＆＃13;

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

＆＃13;

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

＆＃13;

自动img缩放？

1 个答案: