最大宽度/高度不拉伸较小的图像?

Question

我在我的网站上有模态图像，我已经设置了一个最大尺寸(在css代码中)，所以它们打开时不会太大。但是，我也有一些图片比我设置的set - max-size要小，当点击它们的时候，它们会被拉伸。我不想那样。我希望它们保持原来的大小，即使它们很小。

我该怎么做?

这是我一直在使用的html和css(和Javascript):https://www.w3schools.com/howto/howto_css_modal_images.asp

有什么东西在拉伸我的小图像吗?

Answer 1

首先将图像扭曲为<div> </div>

然后将min-width设置为div而不是图像

css

.wrapper {
min-width:; /*set min width*/
max-width:; /*set max width*/
}
.wrapper img{
width:100%;
object-fit:contain;
}

html

<div class="wrapper">
<img src="image.jpg">
</div>

Answer 2

如果你设置了图像的最大宽度和高度，那么它们不会超过这些，但是如果图像的自然尺寸都较小，它们就不会扩展(不像你设置了宽度或高度)。没有拉伸或扭曲，只是较大的图像将显示比其自然尺寸小。

这个片段显示了各种自然尺寸的图像，以及它们的"有限"版本——最大宽度和高度被设置为视口尺寸的50%和绝对像素大小的较小值。

img.limited {
max-width: min(50vw, 500px);
max-height: min(50vh, 250px);
}

max-width = min(50vw, 500px);<br> max-height = min(50vh, 250px);<br>
<br>img dimensions 100 x 150<br>
<img src="https://picsum.photos/id/1015/100/150" />
<img class="limited" src="https://picsum.photos/id/1015/100/150" />
<br>img dimensions 1000 x 300<br>
<img src="https://picsum.photos/id/1016/1000/300" />
<img class="limited" src="https://picsum.photos/id/1016/1000/300" />
<br>img dimensions 200 x 200<br>
<img src="https://picsum.photos/id/1018/200/200" />
<img class="limited" src="https://picsum.photos/id/1018/200/200" />
<br>img dimensions 300 x 1000<br>
<img src="https://picsum.photos/id/1019/300/1000" />
<img class="limited" src="https://picsum.photos/id/1019/300/1000" />