如何自动调整图像大小以适合div容器

你如何自动调整一个大的图像，使其适合一个较小的宽度div容器，同时保持它的宽高比？

---

例如：stackoverflow.com – 当图像插入到编辑器面板上，图像太大而无法放到页面上时，图像会自动resize。

Answer 1

不要将明确的宽度或高度应用于图像标签。 相反，给它：

max-width:100%; max-height:100%; 

例如： 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> 

Answer 2

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

原来还有另一种方法来做到这一点。

 <img style='height: 100%; width: 100%; object-fit: contain'/> 

会做这项工作。 这是CSS3的东西。

小提琴： http : //jsfiddle.net/mbHB4/7364/

Answer 3

目前没有办法以确定的方式正确地做到这一点，使用固定大小的图像，如JPEG或PNG文件。

要按比例调整图像大小，必须将高度或宽度设置为“100％”，但不能同时设置两者。 如果您同时设置为“100％”，则图像将被拉伸。

select是否做高度或宽度取决于您的图像和容器尺寸：

1. 如果你的图像和容器都是“肖像形”或两者都是“风景形”（高于宽度，或高于宽度），则高度或宽度中的哪一个是“％100” 。
2. 如果图像是纵向的，而您的容器是横向的，则必须在图像上设置height="100%" 。
3. 如果您的图像是横向的，并且您的容器是纵向的，则必须在图像上设置width="100%" 。

如果你的图像是一个SVG，这是一个可变大小的vector图像格式，你可以扩大以适应容器自动发生。

您只需确保SVG文件中没有设置<svg>标记中的这些属性：

 height width viewbox 

导出SVG文件时，大多数vector绘图程序会设置这些属性，所以每次导出时都必须手动编辑文件，或者编写一个脚本来完成。

Answer 4

这里是一个解决scheme，即使提供的图像太小或太大，以适应在div div垂直和水平alignment你的IMG内没有任何拉伸。 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); } 

我希望这可以帮助你们

Answer 5

简单一点！

给容器一个固定的 height ，然后在里面设置width和max-height的img标签。

 <div style="height: 250px"> <img src="..." alt=" " style="width: 100%;max-height: 100%" /> </div> 

不同的是，您将width设置为100％而不是max-width 。

Answer 6

看看我的解决scheme： http : //codepen.io/petethepig/pen/dvFsA

它是用纯CSS编写的，没有任何JS代码。 它可以处理任何大小和方向的图像。

鉴于这样的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; } 

Answer 7

您可以将图像设置为div的背景，然后使用css background-size属性

 background-size: cover; 

它会“缩放背景图像到尽可能大，使背景区域被背景图像完全覆盖，背景图像的某些部分可能不能在背景定位区域内查看”-w3schools.com

Answer 8

这种解决scheme不会拉伸图像，并填充整个容器，但会削减一些图像。

HTML

  <div><img src="http://img.dovov.comimage.png"></div> 

CSS

 div { width: 100%; height: 10em; overflow: hidden; img { min-width: 100%; min-height: 100%; } 

Answer 9

我刚刚发布了一个jQuery插件，可以根据您的需要使用很多选项：

https://github.com/GestiXi/image-scale

用法：

HTML

 <div class="image-container"> <img class="scale" data-scale="best-fit-down" data-align="center" src="img/example.jpg"> </div> 

JS

 $(function() { $("img.scale").imageScale(); }); 

Answer 10

当图像太小时，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> 

笔记：
1 /对于webkit，您必须添加-webkit-transform：scale（4）; -webkit-transform-origin：left top; 在风格。
2 /比例因子为4，您有最大宽度= 400/4 = 100和最大高度= 200/4 = 50
3 /另一种解决scheme是将最大宽度和最大高度设置为25％，甚至更简单

Answer 11

我有更好的解决scheme，而不需要任何JS。 它充分响应，我使用它很多。 您经常需要将具有指定宽高比的任何宽高比的图像放入容器元素中。 让这件事情充分响应是必须的。

 /* 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="//placehold.it/400x300" class="fit-img" alt="sample"> </div> <div class="aspect-ratio aspect-ratio-4-3 img-frame"> <img src="//placehold.it/400x300" class="fit-img fit-img-tight" alt="sample"> </div> <div class="aspect-ratio aspect-ratio-16-9 img-frame"> <img src="//placehold.it/400x400" class="fit-img" alt="sample"> </div> <div class="aspect-ratio aspect-ratio-16-9 img-frame"> <img src="//placehold.it/300x400" class="fit-img fit-img-bottom" alt="sample"> </div> </div> 

Answer 12

编辑：基于表格的图像定位在IE11中有问题（ max-height在display:table元素中不起作用）。 我用基于内联的定位取代了它，它不仅在IE7和IE11中都能正常工作，而且还需要更less的代码。

---

这是我的主题。 它只会在容器具有指定的大小（ max-width和max-height似乎没有和没有具体大小的容器相处）的情况下工作，但是我写了一个允许它成为css的方法重用（将picture-frame类和px125大小类添加到您的现有容器中）。

在CSS中：

 .picture-frame { vertical-align:top; display:inline-block; text-align:center; } .picture-frame.px125 { width:125px; height:125px; line-height:125px; } .picture-frame img { margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */ max-width:100%; max-height:100%; display:inline-block; vertical-align: middle; border:0; /* Remove border on imgs enclosed in anchors in IE */ } 

而在html中：

 <a href="#" class="picture-frame px125"> <img src="http://i.imgur.com/lesa2wS.png"/> </a> 

DEMO

 /* Main style */ .picture-frame { vertical-align:top; display:inline-block; text-align:center; } .picture-frame.px32 { width:32px; height:32px; line-height:32px; } .picture-frame.px125 { width:125px; height:125px; line-height:125px; } .picture-frame img { margin-top:-4px; /* inline images have a slight offset for some reason when positioned using vertical-align */ max-width:100%; max-height:100%; display:inline-block; vertical-align: middle; border:0; /* Remove border on imgs enclosed in anchors in IE */ } /* Extras */ .picture-frame { padding: 5px; } .frame { border:1px solid black; } 

 <p>32px</p> <a href="#" class="picture-frame px32 frame"> <img src="http://i.imgur.com/lesa2wS.png"/> </a> <a href="#" class="picture-frame px32 frame"> <img src="http://i.imgur.com/kFMJxdZ.png"/> </a> <a href="#" class="picture-frame px32 frame"> <img src="http://i.imgur.com/BDabZj0.png"/> </a> <p>125px</p> <a href="#" class="picture-frame px125 frame"> <img src="http://i.imgur.com/lesa2wS.png"/> </a> <a href="#" class="picture-frame px125 frame"> <img src="http://i.imgur.com/kFMJxdZ.png"/> </a> <a href="#" class="picture-frame px125 frame"> <img src="http://i.imgur.com/BDabZj0.png"/> </a> 

Answer 13

下面的代码是从上面改编的，并使用名为storm.jpg的图像进行了testing。这是显示图像的简单页面的完整HTML代码。 这工作完美，由我与www.resizemybrowser.comtesting。 将CSS代码放在HTML代码的顶部，放在头部的下方。 把图片代码放在任何你想要的图片。

 <html> <head> <style type="text/css"> #myDiv { height:auto; width:auto; } #myDiv img { max-width:100%; max-height:100%; margin:auto; display:block; } </style> </head> <body> <div id="myDiv"> <img src="images/storm.jpg"> </div> </body> </html> 

Answer 14

一个美丽的黑客。

你有两种方式使图像响应。

1. 当图像是背景图像时。

 #container{ width: 300px; height: 300px; background-image: url(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标签来放置图像，因为它比SEO更像 background-image ，因为您可以在img标签的alt中编写关键字 。 所以在这里你可以使图像响应。

2. 当图像在img标签。

 #container{ width: 300px; overflow: hidden; } img{ width: 100%; object-fit: contain; } <div id="container"> <img src="blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/> <div> 

在这里运行

Answer 15

我按照这种方式在一个超链接中按比例放大和缩放图像：

 #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; } 

在IE，Firefox，Safari中testing。

更多关于居中的信息在这里 。

Answer 16

 <style type="text/css"> #container{ text-align:center; width: 100%; height: 200px; /*set height*/ margin: 0px; padding: 0px; background-image:url('../assetshttp://img.dovov.comimg.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> 

Answer 17

你必须告诉浏览器你放置的位置的高度。

 .example { height: 220px; //DEFINE HEIGHT background:url('../img/example.png'); background-size: 100% 100%; background-repeat: no-repeat; } 

Answer 18

将图像所需的高度和宽度提供给包含<img>标记的div。 不要忘记给适当的风格标签的高度/宽度。 在<img>标签中，将最大高度和最大宽度设置为100％。

 <div style="height:750px; width:700px;"> <img alt="That Image" style="max-height:100%; max-width:100%;" src=""> </div> 

你可以在适当的课程中添加细节。

Answer 19

下面是一个简单的解决scheme（4步修复!!），似乎适用于我。 希望它有帮助。示例使用宽度来确定整体大小，但您也可以翻转它来使用高度。

1. 将CSS样式应用于图像容器（例如，
2. 将width属性设置为所需的尺寸
   • 对于尺寸，相对尺寸使用％，或者自动缩放（基于图像容器或显示器） – 使用px（或其他）作为静态或设置尺寸
3. 根据宽度设置高度属性自动调整
4. 请享用！

例如

 <img style="width:100%; height:auto;" src="https://googledrive.com/host/0BwDx0R31u6sYY1hPWnZrencxb1k/thanksgiving.png" /> 

Answer 20

在这里回答 ，你也可以使用vh单位而不是max-height: 100%如果它不能在你的浏览器上工作的话（比如Chrome）：

 img { max-height: 75vh; } 

Answer 21

解决方法很简单，有一些math…

只需将图像放在div中，然后在html文件中指定图像，使用图像的像素值以百分比forms设置宽度和高度值，以计算宽度与高度的精确比率。

例如，假设您的图像宽度为200像素，高度为160像素。 您可以放心地说，宽度值将是100％，因为它是较大的值。 要计算高度值，只需将高度除以给出百分比值80％的宽度即可。 在代码中它会看起来像这样…

Answer 22

所有提供的答案，包括被接受的答案， 都只在假定div包装具有固定尺寸的情况下才起作用。 所以这是怎么做的， 无论 div封装的大小是什么，这是非常有用的，如果你开发一个响应页面：

在DIVselect器中写下这些声明：

 width : 8.33% /* or whatever percentage you want your div to take*/ max-height : anyValueYouWant /*(in px or %)*/ 

然后把这些声明放到你的IMGselect器中：

 width : "100%" /* obligatory */ max-height : anyValueYouWant /*(in px or %)*/ 

很重要：

对于DIV和IMGselect器， maxHeight的值必须相同 。

Answer 23

检查我的答案https://stackoverflow.com/a/36712112/2439715

 img{ width: 100%; max-width: 800px; } 

Answer 24

最简单的方法是

通过使用对象适合

 <div class="container"> <img src="path/to/image.jpg"> </div> .container{ height: 300px; } .container img{ height:100%; width:100%; object-fit: cover; } 

如果你使用引导只是添加img响应类，并改变

 .container img{ object-fit: cover; } 

Answer 25

或者你可以简单地使用：

 background-position:center; background-size:cover; 

现在图像将占据div的所有空间。

Answer 26

简单地定义div

  div.headerimg1 { position: absolute; top: 290px; left: 81px; width: 389px; height: 349px; } <div class="headerimg1"> <img src="" style="max-height:100%;height:auto;width:100%;max-width:100%;margin:auto; display:inline;"></div>