如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
让它变得简单!
给容器一个固定的高度,然后为容器内的img标记设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同的是,您将宽度设置为100%,而不是最大宽度。
其他回答
所有提供的答案,包括已接受的答案,都只能在假设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的值必须相同。
此解决方案不会拉伸图像并填充整个容器,但会剪切部分图像。
HTML格式:
<div><img src="/images/image.png"></div>
CSS:
div {
width: 100%;
height: 10em;
overflow: hidden;
img {
min-width: 100%;
min-height: 100%;
}
我以这种方式在超链接内水平和垂直居中并按比例缩放图像:
#link {
border: 1px solid blue;
display: table-cell;
height: 100px;
vertical-align: middle;
width: 100px;
}
#link img {
border: 1px solid red;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 60px;
max-width: 60px;
}
它在Internet Explorer、Firefox和Safari中进行了测试。
有关居中的更多信息,请参阅此处。
目前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。
要按比例调整图像大小,必须将高度或宽度设置为“100%”,但不能同时设置两者。如果将两者都设置为“100%”,则图像将被拉伸。
选择高度还是宽度取决于图像和容器尺寸:
如果您的图像和容器都是“肖像形状”或“风景形状”(分别比它们宽或宽),那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的,而容器是横向的,则必须在图像上设置height=“100%”。如果图像是横向的,而容器是纵向的,则必须在图像上设置width=“100%”。
如果您的图像是SVG,这是一种可变大小的矢量图像格式,则可以自动展开以适应容器。
您只需确保SVG文件中没有在<SVG>标记中设置这些财产:
height
width
viewbox
大多数矢量绘图程序在导出SVG文件时都会设置这些财产,因此每次导出时都必须手动编辑文件,或者编写脚本来进行编辑。
您可以将图像设置为div的背景,然后使用CSS background size属性:
background-size: cover;
它将“将背景图像缩放到尽可能大,以使背景区域完全被背景图像覆盖。背景图像的某些部分可能在背景定位区域内看不见”--W3Schools