Question

我正在为图片库制作一个简单的灯箱。问题是图像不占用#wrapper div的整个高度/宽度。

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

还尝试width:100%; height:auto;，但如果图片的高度很大，则只会重叠#wrapper div。

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

我没有找到任何好的答案，所以我使用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 2

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

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

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

Answer 3

我已经用大图片更新了片段，但结果是相同的图片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 4

您正在将.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 5

这有助于：

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

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

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

6 个答案: