简体   繁体   English

使图像响应浏览器的宽度和高度调整

[英]Making images respond to browser resize with both width and height

I have been trying to make images resize proportionally, leaving whitespace, so they are always fully seen in the browser window without having to scroll. 我一直在尝试按比例调整图像大小,保留空白,因此无需滚动即可始终在浏览器窗口中完全看到它们。 All of the solutions I have found so far can resize the image based on the browser window width, but if the proportions of the browser window don't match the image, then it will cut off the image and the user will have to scroll down to see the rest. 到目前为止,我发现的所有解决方案都可以根据浏览器窗口的宽度来调整图像的大小,但是如果浏览器窗口的比例与图像不匹配,则会切断图像,用户必须向下滚动看剩下的。 I know that there is also background-size: cover; 我知道还有背景尺寸:封面; but I don't want the image to be clipped. 但我不希望图像被剪切。 Any ideas? 有任何想法吗?

You can try vh and vw units in CSS. 您可以在CSS中尝试使用vh和vw单位。 And accaptable by almost all browsers. 几乎所有浏览器都可以使用。

img{width:vw;height:vh;}

The drawback is image may shrink... So you can try with overflow hidden. 缺点是图像可能会缩小...因此您可以尝试隐藏溢出。

img{width:vh;height:vh;overflow:hidden;position:center;}

You want the object-fit: contain property if you're using <img> , or background-fit: contain if it's a CSS background-image . 如果要使用<img> ,则需要object-fit: contain属性;如果它是CSS background-image则需要background-fit: contain

http://codepen.io/robinrendle/pen/BywNVX http://codepen.io/robinrendle/pen/BywNVX

object-fit doesn't have perfect browser support , but there is a polyfill for it . object-fit 没有完美的浏览器支持 ,但是有一个polyfill

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM