[英]Is it possible to scale an image proportionally both on width and height based on a fixed container?
Suppose we have an image that is 400x200 and another that is 200x400 and I want them to fit in a 200x200 box so the first should be scaled to 200x100 and the second to 100x200 假设我们有一个400x200的图像和另一个200x400的图像,我希望它们适合200x200的盒子,所以第一个应该缩放到200x100,第二个应该缩放到100x200
We won't know the dimensions of the images in advance. 我们不会提前知道图像的尺寸。
[edit] Plenty of good answers, thank you all! [编辑]很多好的答案,谢谢大家!
One way is to use object-fit
: 一种方法是使用object-fit
:
img {
object-fit: contain;
width: 200px;
height: 200px;
}
JSFiddle Demo: https://jsfiddle.net/t75cxqt0/2/ JSFiddle演示: https ://jsfiddle.net/t75cxqt0/2/
Set both of these: 设置以下两个:
max-width: 200px;
max-height: 200px;
That will keep allow the images to resize automatically to a maximum of 200px on either side. 这样可以保持图像自动调整大小,最大值为200px。
img { max-width: 200px; max-height: 200px; /* just for demo purposes*/ margin: 1em; }
<img src="https://dummyimage.com/400x200/000/fff" /> <img src="https://dummyimage.com/200x400/000/fff" />
As pointed out elsewere, you could use max-height
and max-width
, which is good. 正如所指出的那样,你可以使用max-height
和max-width
,这很好。 But I'd like to take it a step further, and make it so that it doesn't matter what the container size is. 但是我想更进一步,并使它与容器尺寸无关紧要。 Use a percentage value instead of 200px
: 使用百分比值而不是200px
:
img {
max-width: 100%;
max-height: 100%;
}
Here is an example: 这是一个例子:
.container { border: 5px solid blue; width: 200px; height: 200px; } img { max-width: 100%; max-height: 100%; }
<div class="container"> <img src="http://www.piprd.com/images/400X200.gif"> </div> <div class="container"> <img src="https://fakeimg.pl/200x400/"> </div>
To prove this works, I have written some code (unnecessary for your actual code). 为了证明这一点,我编写了一些代码(实际代码不需要)。 You just need to enter the desired width + height for the container, and you can see the effect! 您只需要为容器输入所需的宽度+高度,就可以看到效果!
function size() { var width = prompt("Please enter width for container", "200px"); var height = prompt("Please enter height for container", "200px"); if (width != null) { $('.container').css('width', width); } if (height != null) { $('.container').css('height', height); } }
.container { border: 5px solid blue; width: 200px; height: 200px; } img { max-width: 100%; max-height: 100%; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <button style="float: right;" onclick="size()">Choose size values</button> <div class="container"> <img src="http://www.piprd.com/images/400X200.gif"> </div> <div class="container"> <img src="https://fakeimg.pl/200x400/"> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.