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

How do I auto-resize an image to fit a 'div' container?

提问by 001

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio?

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

---

---

Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.

示例：stackoverflow.com - 当图像插入到编辑器面板并且图像太大而无法放入页面时，图像会自动调整大小。

回答by Kevin

Do not apply an explicit width or height to the image tag. Instead, give it:

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

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

Also, height: auto;if you want to specify a width only.

此外，height: auto;如果您只想指定宽度。

Example: http://jsfiddle.net/xwrvxser/1/

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

回答by Shih-Min Lee

object-fit

对象适合

It turns out there's another way to do this.

事实证明，还有另一种方法可以做到这一点。

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

will do the work. It's CSS 3 stuff.

会做的工作。这是 CSS 3 的东西。

Fiddle: http://jsfiddle.net/mbHB4/7364/

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

回答by Neil

Currently there is no way to do this correctly in a deterministic way, with fixed-size images such as JPEGs or PNG files.

目前没有办法以确定性的方式正确地执行此操作，使用固定大小的图像，例如 JPEG 或 PNG 文件。

To resize an image proportionally, you have to set eitherthe height or width to "100%", but not both.If you set both to "100%", your image will be stretched.

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

Choosing whether to do height or width depends on your image and container dimensions:

选择高度还是宽度取决于您的图像和容器尺寸：

1. If your image and container are both "portrait shaped" or both "landscape shaped" (taller than they are wide, or wider than they are tall, respectively), then it doesn't matter which of height or width are "%100".
2. If your image is portrait, and your container is landscape, you must set height="100%"on the image.
3. If your image is landscape, and your container is portrait, you must set width="100%"on the image.

1. 如果您的图像和容器都是“纵向形状”或都是“横向形状”（分别高于宽度或宽度大于高度），那么高度或宽度中的哪个是“%100”并不重要.
2. 如果您的图像是纵向的，而您的容器是横向的，则必须height="100%"在图像上进行设置。
3. 如果您的图像是横向的，而您的容器是纵向的，则必须width="100%"在图像上进行设置。

If your image is an SVG, which is a variable-sized vector image format, you can have the expansion to fit the container happen automatically.

如果您的图像是 SVG，它是一种可变大小的矢量图像格式，您可以自动进行扩展以适应容器。

You just have to ensure that the SVG file has none of these properties set in the <svg>tag:

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

height
width
viewbox

Most vector drawing programs out there will set these properties when exporting an SVG file, so you will have to manually edit your file every time you export, or write a script to do it.

大多数矢量绘图程序在导出 SVG 文件时都会设置这些属性，因此您每次导出时都必须手动编辑文件，或者编写脚本来执行此操作。

回答by Humble Rumble

Here is a solution that will both vertically and horizontally align your img within a div without any stretching even if the image supplied is too small or too big to fit in the div.

这是一个解决方案，即使提供的图像太小或太大而无法放入 div，它也可以在 div 中垂直和水平对齐您的 img 而不进行任何拉伸。

The HTML content:

HTML 内容：

<div id="myDiv">
  <img alt="Client Logo" title="Client Logo" src="Imagelocation" />
</div>

The CSS content:

CSS 内容：

#myDiv
{
  height: 104px;
  width: 140px;
}
#myDiv img
{
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

The jQuery part:

jQuery 部分：

var logoHeight = $('#myDiv img').height();
    if (logoHeight < 104) {
        var margintop = (104 - logoHeight) / 2;
        $('#myDiv img').css('margin-top', margintop);
    }

回答by Mehdi Maghrooni

Make it simple!

让它变得简单！

Give the container a fixedheightand then for the imgtag inside it, set widthand max-height.

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

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

The difference is that you set the widthto be 100%, not the max-width.

不同之处在于您将 设置width为 100%，而不是max-width.

回答by Siraj Alam

A beautiful hack.

一个漂亮的黑客。

You have two ways of making the image responsive.

您有两种方法可以使图像具有响应性。

1. When an image is a background image.

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

#container{
    width: 300px;
    height: 300px;
    background-image: url(http://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>

Run it here

在这里运行

---

---

但是，应该使用imgimg标签来把图像，因为它是优于background-imagebackground-image来讲SEO搜索引擎优化，你可以写keyword关键字在altalt中的imgimg标签。所以这里是你可以使图像响应。

2. When image is in imgtag.

2. 当图像在img标签中时。

#container{
    max-width: 400px;
    overflow: hidden;
}
img{
    width: 100%;
    object-fit: contain;
}

<div id="container">
   <img src="http://images.fonearena.com/blog/wp-content/uploads/2013/11/Lenovo-p780-camera-sample-10.jpg" alt="your_keyword"/>
<div>

Run it here

在这里运行

回答by Chuck Dries

You can set the image as the background to a div, and then use the CSS background-size property:

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

background-size: cover;

It will "Scale the background image to be as large as possible so that the background area is completely covered by the background image. Some parts of the background image may not be in view within the background positioning area"-- W3Schools

这将“缩放的背景图像是尽可能的大，以使背景区域完全被背景图像覆盖背景图像的某些部分可能不是在背景定位区域之内的图。”- W3Schools的

回答by dmitry

Check out my solution: http://codepen.io/petethepig/pen/dvFsA

查看我的解决方案：http: //codepen.io/petthepig/pen/dvFsA

It's written in pure CSS, without any JavaScript code. It can handle images of any size and any orientation.

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

Given such HTML:

鉴于这样的 HTML：

<div class="image">
  <div class="trick"></div>
  <img src="http://placekitten.com/415/200"/>
</div>

the CSS code would be:

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

回答by Nicolas BADIA

I just published a jQuery plugin that does exactly what you need with a lot of options:

我刚刚发布了一个 jQuery 插件，它通过很多选项完全满足您的需求：

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

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

Usage:

用法：

HTML

HTML

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

JavaScript

JavaScript

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

回答by Miia Klingstedt

This solution doesn't stretch the image and fills the whole container, but it cuts some of the image.

此解决方案不会拉伸图像并填充整个容器，但会剪切一些图像。

HTML:

HTML：

 <div><img src="/images/image.png"></div>

CSS:

CSS：

div {
    width: 100%;
    height: 10em;
    overflow: hidden;

img {
    min-width: 100%;
    min-height: 100%;
}