如何自动调整图像大小以适合“div"容器? [英] How do I auto-resize an image to fit a 'div' container?
本文介绍了如何自动调整图像大小以适合“div"容器?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何自动调整大图像的大小,使其适合较小宽度的 div 容器,同时保持其宽高比?
<小时>示例:stackoverflow.com - 当图像插入到编辑器面板并且图像太大而无法放入页面时,图像会自动调整大小.
解决方案
How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio?
Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.
解决方案
It turns out there's another way to do this.
<img style='height: 100%; width: 100%; object-fit: contain'/>
will do the work. It's CSS 3 stuff.
Fiddle: http://jsfiddle.net/mbHB4/7364/
这篇关于如何自动调整图像大小以适合“div"容器?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文