使图像占据 div 的完整高度/宽度，同时保持纵横比

Question

我正在为图片库制作一个简单的灯箱。问题是图像没有占据#wrapper div 的全部高度/宽度。

我尝试使用 max-width 和 max-height css 属性，但图像没有占用完整的宽度/高度。在小屏幕中，图像会相应地占据整个高度/宽度，但在大屏幕宽度中，它不会占据整个宽度/高度。

也尝试过width:100%; height:auto;，但如果图像的高度很大，它只会与#wrapper div 重叠。

codepen.io 上的演示。

html:

<div id="snap-modal">
    <div id="wrapper">
        <img src="http://placehold.it/450x450">
    </div>
</div>

css:

#snap-modal {
  width: 90%;
  height: 90%;
  outline: 1px solid lightgrey;
  top: 0;
  left: 0;
  position: fixed;
}

#snap-modal #wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

#snap-modal #wrapper img {
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

如何根据 div 内的图像大小（如果可能，在 css 中）使图像具有完整的高度/宽度，同时保持纵横比？谢谢。

Answer 1

是的，可以尝试 object-fit: cover; 属性以及高度或宽度

#snap-modal #wrapper {
  width: 100%;
  object-fit: cover;
}

查看更多详情https://css-tricks.com/almanac/properties/o/object-fit/

Answer 2

我没有找到任何好的答案，所以我正在使用js来做。

var image;
var container = snap_modal.find('#wrapper');
var snap_image = container.find('img');

function change_image() {
    snap_image.attr('src', image.attr('src'));
    image_title.text(image.attr('alt'));
}

function resize_snap() {
    change_image();
    snap_image.css({
        'height': container.height(),
        'width': 'auto'
    })
    if (snap_image.width() > container.width()) {
        snap_image.css({
            'width': container.width(),
            'height': 'auto'
        })
    }
}

$(function () {
    $('#snap-list .snap img').on('click', function () {
        image = $(this);
        resize_snap();
    });
    $(window).resize(function () {
        resize_snap();
    });
})

这不是最好的作品，但希望这能帮助像我这样的人。

Answer 3

您将.max-width 属性设置为100%，这在这种情况下没有好处，因为您想强制图像的宽度等于容器的宽度（#wrapper），您必须使用属性min-width: 100% 相反，这将强制图像采用完整的容器宽度。所以css现在变成了：

#snap-modal #wrapper img {
  min-width: 100%; // This is updated style
  min-height: 100%; //Similarly for height
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

查看更新后的codepen

Answer 4

这有帮助吗：

#snap-modal {
  width: 90%;
  height: 90%;
  outline: 1px solid lightgrey;
}

#snap-modal #wrapper {
  width: 100%;
  height: 100%;
}

#snap-modal #wrapper img {
  margin:auto;
  height:100%;
  width:100%;
}

Answer 5

我已经用大图像更新了 sn-p，但结果是相同的图像 sizr 现在是 1920x1200

#snap-modal #wrapper img {
  max-width: 100%;// remove this line with widht:100%
  max-height: 100%;// remove this line with height:100%
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

片段

#snap-modal {
  width: 90%;
  height: 90%;
  outline: 1px solid lightgrey;
  top: 0;
  left: 0;
  position: fixed;
}

#snap-modal #wrapper {
  width: 100%;
  position: relative; 
}

#snap-modal #wrapper img {
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

<div id="snap-modal">
  <div id="wrapper">
    <img src="http://www.planwallpaper.com/static/images/434976-happy-valentines-day-timeline-cover.jpg">
  </div>
</div>

Answer 6

嘿，访问该链接对我很有帮助 maintain-image-aspect-ratios-responsive-web-design