如何自动调整图像大小以适合“div"容器? [英] How do I auto-resize an image to fit a 'div' container?

问题描述

如何自动调整大图像的大小，使其适合较小宽度的 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.

解决方案

object-fit

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屋！