如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
所有提供的答案,包括已接受的答案,都只能在假设div包装器大小固定的情况下工作。因此,无论div包装器的大小如何,这都是如何实现的,如果您开发响应页面,这非常有用:
在DIV选择器中编写以下声明:
width: 8.33% /* Or whatever percentage you want your div to take */
max-height: anyValueYouWant /* (In px or %) */
然后将这些声明放入IMG选择器中:
width: "100%" /* Obligatory */
max-height: anyValueYouWant /* (In px or %) */
非常重要:
对于DIV和IMG选择器,maxHeight的值必须相同。
其他回答
下面是一个简单的解决方案(4步修复!!),似乎对我有用。该示例使用宽度来确定整体大小,但也可以翻转宽度以使用高度。
将CSS样式应用于图像容器(例如,<img>)将宽度属性设置为所需的尺寸对于尺寸,使用%表示相对大小或自动缩放(基于图像容器或显示)对静态维度或集合维度使用px(或其他)将高度属性设置为根据宽度自动调整享受!
例如
<img style="width:100%; height:auto;"
src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png"
/>
目前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。
要按比例调整图像大小,必须将高度或宽度设置为“100%”,但不能同时设置两者。如果将两者都设置为“100%”,则图像将被拉伸。
选择高度还是宽度取决于图像和容器尺寸:
如果您的图像和容器都是“肖像形状”或“风景形状”(分别比它们宽或宽),那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的,而容器是横向的,则必须在图像上设置height=“100%”。如果图像是横向的,而容器是纵向的,则必须在图像上设置width=“100%”。
如果您的图像是SVG,这是一种可变大小的矢量图像格式,则可以自动展开以适应容器。
您只需确保SVG文件中没有在<SVG>标记中设置这些财产:
height
width
viewbox
大多数矢量绘图程序在导出SVG文件时都会设置这些财产,因此每次导出时都必须手动编辑文件,或者编写脚本来进行编辑。
事实证明,还有另一种方法可以做到这一点:对象拟合。
<img style='height: 100%; width: 100%; object-fit: contain'/>
将完成工作。当然,不要忘记包含其他必要的属性,如src和alt。
小提琴:http://jsfiddle.net/mbHB4/7364/
以下内容非常适合我:
img{
height: 99999px;
object-fit:contain;
max-height: 100%;
max-width: 100%;
display: block;
margin: auto auto;
}
如果您使用Bootstrap,只需将img响应类添加到img标记:
<img class="img-responsive" src="img_chania.jpg" alt="Chania">
引导映像