如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
如何自动调整大图像的大小,使其适合较小宽度的div容器,同时保持其宽高比?
示例:stackoverflow.com-当图像插入到编辑器面板上,并且图像太大而无法放到页面上时,图像将自动调整大小。
当前回答
查看我的解决方案:http://codepen.io/petethepig/pen/dvFsA
它是用纯CSS编写的,没有任何JavaScript代码。它可以处理任何大小和方向的图像。
给定这样的HTML:
<div class="image">
<div class="trick"></div>
<img src="http://placekitten.com/415/200"/>
</div>
CSS代码将是:
.image {
font-size: 0;
text-align: center;
width: 200px; /* Container's dimensions */
height: 150px;
}
img {
display: inline-block;
vertical-align: middle;
max-height: 100%;
max-width: 100%;
}
.trick {
display: inline-block;
vertical-align: middle;
height: 150px;
}
其他回答
检查我的答案,使图像响应-最简单的方法-
img{
width: 100%;
max-width: 800px;
}
当图像太小时,Thorn007的公认答案不起作用。
为了解决这个问题,我添加了一个比例因子。这样,它会使图像变大,并填充div容器。
例子:
<div style="width:400px; height:200px;">
<img src="pix.jpg" style="max-width:100px; height:50px; transform:scale(4); transform-origin:left top;" />
</div>
笔记:
对于WebKit,必须添加-WebKit transform:scale(4)-webkit转换原点:左上;在风格上。比例因子为4时,最大宽度=400/4=100,最大高度=200/4=50另一种解决方案是将最大宽度和最大高度设置为25%。这更简单。
目前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。
要按比例调整图像大小,必须将高度或宽度设置为“100%”,但不能同时设置两者。如果将两者都设置为“100%”,则图像将被拉伸。
选择高度还是宽度取决于图像和容器尺寸:
如果您的图像和容器都是“肖像形状”或“风景形状”(分别比它们宽或宽),那么高度和宽度中的哪一个都是“%100”并不重要。如果图像是纵向的,而容器是横向的,则必须在图像上设置height=“100%”。如果图像是横向的,而容器是纵向的,则必须在图像上设置width=“100%”。
如果您的图像是SVG,这是一种可变大小的矢量图像格式,则可以自动展开以适应容器。
您只需确保SVG文件中没有在<SVG>标记中设置这些财产:
height
width
viewbox
大多数矢量绘图程序在导出SVG文件时都会设置这些财产,因此每次导出时都必须手动编辑文件,或者编写脚本来进行编辑。
所有提供的答案,包括已接受的答案,都只能在假设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的值必须相同。
<style type="text/css">
#container{
text-align: center;
width: 100%;
height: 200px; /* Set height */
margin: 0px;
padding: 0px;
background-image: url('../assets/images/img.jpg');
background-size: content; /* Scaling down large image to a div */
background-repeat: no-repeat;
background-position: center;
}
</style>
<div id="container>
<!-- Inside container -->
</div>