[英]How to resize an image so it is always the biggest possible without the being bigger than the window height OR than the window width?
I have an image I want as big as possible, but I want 100% of the image visible no matter how the window is resized. 我有一个尽可能大的图像,但是无论窗口如何调整大小,我都希望图像的100%可见。 I also want to maintain image ratio.
我也想保持图像比例。
I have tried doing 我尝试做
img{
width: 100vh;
}
but that will cut off some of the image depending on the size of the window. 但这会根据窗口的大小截取一些图像。
Here are some examples of what I want: 以下是我想要的一些示例:
You could try to set your image with screen size then use object-fit: cover to set image always fitting the container; 您可以尝试使用屏幕尺寸设置图像,然后使用对象适配:封面设置图像始终适合容器;
img{
width: 100vw;
height: 100vh;
object-fit: contain;
}
Try the following, it will max out the width of the containing element and also use height auto to maintain the aspect ratio of the image(s) 尝试以下操作,它将使包含元素的宽度最大,并且还可以使用height auto来保持图像的长宽比
img {
width:100%;
height:auto;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.