如何自动调整大小的大图像，使其适应较小宽度的
容器，同时保持其宽度：高度比例？
示例：stackoverflow.com - 当将图像插入到编辑面板上，并且图像太大无法适应页面时，图像会自动调整大小。
示例：stackoverflow.com - 当将图像插入到编辑面板上，并且图像太大无法适应页面时，图像会自动调整大小。
33个回答
2446
不要对图像标签应用明确的宽度或高度。相反，给它：
不要对图像标签应用明确的宽度或高度。相反，给它：
max-width:100%;
max-height:100%;
同时，如果您只想指定宽度，请使用 height: auto;。
例如：http://jsfiddle.net/xwrvxser/1/
img {
max-width: 100%;
max-height: 100%;
}
.portrait {
height: 80px;
width: 30px;
}
.landscape {
height: 30px;
width: 80px;
}
.square {
height: 75px;
width: 75px;
}Portrait Div
<div class="portrait">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Landscape Div
<div class="landscape">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>
Square Div
<div class="square">
<img src="http://i.stack.imgur.com/xkF9Q.jpg">
</div>- Kevin
3
66这不会同时缩放高度和宽度。 - Neil
90高度：自适应；如果您只想指定宽度。 - Roi
2不为图像应用显式的宽度和高度会导致页面不会为图像保留空间，页面将会闪烁或者内容在图像加载时可能会跳动。 - Ville Miekk-oja
715
原来有另一种方法可以做到这一点：object-fit。
<img style='height: 100%; width: 100%; object-fit: contain'/>
会完成工作。当然，不要忘记包括其他必要的属性，如src和alt。
- Shih-Min Lee
2
72这会将图像缩放以适应容器的较大维度，因此较小的维度可能无法完全覆盖它。如果要裁剪较大的维度，请使用
object-fit: cover。 - Gabriel Grantobject-fit: cover 对我有用，但不确定为什么？ - vikramvi
121
目前使用固定大小的图片，如JPEG或PNG文件，无法以确定性的方式正确地进行此操作。
要等比例调整图像大小，必须将高度或宽度设置为“100%”，但不能同时设置两者。 如果两者都设置为“100％”，则会拉伸图像。
选择是使用高度还是宽度取决于您的图像和容器尺寸：
- 如果您的图像和容器都是“纵向形状”或“横向形状”（比宽高更高或比宽高更宽），则无论哪个高度或宽度为“％100”都没有关系。
- 如果您的图像为纵向形状，而容器为横向形状，则必须在图像上设置
height="100%"。 - 如果您的图像为横向形状，而容器为纵向形状，则必须在图像上设置
width="100%"。
如果您的图像是SVG，这是一种可变大小的矢量图像格式，则可以自动发生扩展以适应容器。
您只需要确保SVG文件中的<svg>标记未设置以下任何属性即可：
height
width
viewbox
大多数矢量绘图程序在导出SVG文件时会设置这些属性，因此每次导出时您都必须手动编辑文件或编写脚本来执行此操作。
- Neil
98
这里有一个解决方案，可以在不拉伸图像的情况下将img垂直和水平对齐在div内，即使提供的图像太小或太大而无法适应div。
HTML内容如下：
<div id="myDiv">
<img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>
CSS内容：
#myDiv
{
height: 104px;
width: 140px;
}
#myDiv img
{
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
jQuery 部分：
var logoHeight = $('#myDiv img').height();
if (logoHeight < 104) {
var margintop = (104 - logoHeight) / 2;
$('#myDiv img').css('margin-top', margintop);
}
- Humble Rumble
68
您有两种方法使图像具有响应式。
当图像是背景图像时。
#container{
width: 300px;
height: 300px;
background-image: url(https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
<div id="container"><div>
在这里运行它
但是应该使用img标签来放置图像，因为它比background-image更有利于SEO，因为您可以在img标签的alt中编写关键字。所以这里是如何使图像响应。
当图像在img标签中时。
#container{
max-width: 400px;
overflow: hidden;
}
img{
width: 100%;
object-fit: contain;
}
<div id="container">
<img src="https://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>
在此处运行 此代码
- Siraj Alam
2
object-fit: contain 起了作用，谢谢。 - Felipe Morais
对于情况1，当图像是我的背景图像时，background-size: contain; 起了作用。 - Rose
60
让它简单明了！
给容器设置一个固定的高度，然后对其中的img标签设置宽度和最大高度。
<div style="height: 250px">
<img src="..." alt=" " style="width: 100%;max-height: 100%" />
</div>
不同之处在于将width设置为100％，而不是max-width。
- Mehdi Maghrouni
32
您可以将图片设置为一个div的背景，然后使用CSS background-size属性：
你可以将图像设置为div的背景，然后使用CSS background-size属性：background-size: cover;
它会将背景图像缩放到尽可能大，以便背景区域完全被背景图像覆盖。背景图像的某些部分可能不在背景定位区域内。
-- W3Schools- Chuck Dries
25
看看我的解决方案：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;
}
- dmitry
1
这个其实很不错。你可以使用:before伪元素来避免额外的.trick元素。 - undefined
24
有几种方法可以将图像适配到<div>中。
img {
object-fit: cover;
}
CSS的object-fit属性用于指定如何调整<img>或<video>的大小以适应其容器。
该属性告诉内容以各种方式填充容器，例如“保持纵横比”或“拉伸并占据尽可能多的空间”。
- fill - 默认值。图像被调整大小以填充给定的尺寸。必要时，图像将被拉伸或压缩以适合容器
- contain - 图像保持其纵横比，但调整大小以适应给定的尺寸
- cover - 图像保持其纵横比并填充给定的尺寸。图像将被裁剪以适合容器
- none - 图像不会调整大小
- scale-down - 图像缩小到none或contain的最小版本
您可以在此处找到更多工作示例。
- Sergio Reis
15
我有一种更好的解决方案，不需要任何JavaScript。它完全响应，并且我经常使用它。您经常需要将任何宽高比的图像适合具有指定宽高比的容器元素。而且使整个事情完全响应是必须的。
/* For this demo only */
.container {
max-width: 300px;
margin: 0 auto;
}
.img-frame {
box-shadow: 3px 3px 6px rgba(0, 0, 0, .15);
background: #ee0;
margin: 20px auto;
}
/* This is for responsive container with specified aspect ratio */
.aspect-ratio {
position: relative;
}
.aspect-ratio-1-1 {
padding-bottom: 100%;
}
.aspect-ratio-4-3 {
padding-bottom: 75%;
}
.aspect-ratio-16-9 {
padding-bottom: 56.25%;
}
/* This is the key part - position and fit the image to the container */
.fit-img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 80%;
max-height: 90%
}
.fit-img-bottom {
top: auto;
}
.fit-img-tight {
max-width: 100%;
max-height: 100%
}<div class="container">
<div class="aspect-ratio aspect-ratio-1-1 img-frame">
<img src="https://via.placeholder.com/400x300" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-4-3 img-frame">
<img src="https://via.placeholder.com/400x300" class="fit-img fit-img-tight" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="https://via.placeholder.com/400x400" class="fit-img" alt="sample">
</div>
<div class="aspect-ratio aspect-ratio-16-9 img-frame">
<img src="https://via.placeholder.com/300x400" class="fit-img fit-img-bottom" alt="sample">
</div>
</div>您可以分别设置最大宽度和最大高度；图像将尊重其中较小的一个（取决于图像的值和长宽比）。您还可以根据需要设置图像的对齐方式（例如，对于无限白色背景上的产品图片，您可以轻松地将其定位到中心底部）。
- actimel
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
- http://plugins.jquery.com/project/myimgscale
- http://code.google.com/p/jquery-imagefit-plugin/
- Maxime Pacary