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

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

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

3427660 次浏览
小开
最佳答案

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

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>

小开

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

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

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

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

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

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

heightwidthviewbox

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

小开

我以这种方式在水平和垂直方向上按比例居中和缩放超链接内的图像：

#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中进行了测试。

关于中心化的更多信息是这里。

小开

这是一个解决方案，将垂直和水平对齐你的img在一个div没有任何拉伸，即使提供的图像太小或太大，以适应div。

超文本标记语言：

<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);}
小开

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

background-size: cover;

它将msgstr"将背景图像缩放到尽可能大的范围，使背景区域完全被背景图像覆盖。背景图像的某些部分可能无法在背景定位区域内看到。"--W3学校

小开

将图像所需的高度和宽度提供给包含标签的div。不要忘记在适当的样式标签中提供高度/宽度。

在标签中，将max-height和max-width设置为100%。

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

您可以在正确完成后将详细信息添加到适当的类中。

小开

下面的代码改编自之前的答案，并由我使用名为storm.jpg的图像进行测试。

这是一个显示图像的简单页面的完整超文本标记语言代码。这很完美，我用www.resizemybrowser.com.把CSS代码放在你的超文本标记语言代码的顶部，在你的头部下面。把图片代码放在你想要图片的任何地方。

<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>
小开

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

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

给定这样的超文本标记语言：

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

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

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

用法：

超文本标记语言

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

javascript

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

简单点！

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

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

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

小开

解决方案很简单，只需一点数学…

只需将图像放入div，然后放入指定图像的超文本标记语言文件中。使用图像的像素值以百分比设置宽度和高度值，以计算宽度与高度的确切比率。

例如，假设你有一个宽度为200像素，高度为160像素的图像。你可以放心地说宽度值将是100%，因为它是较大的值。然后要计算高度值，你只需将高度除以宽度，得到80%的百分比值。在代码中，它将看起来像这样…

<div class="image_holder_div"><img src="some_pic.png" width="100%" height="80%"></div>
小开

当图像太小了时，来自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. 另一种解决方案是将最大宽度和最大高度设置为25%。它甚至更简单。
小开 
<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>
小开

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

超文本标记语言：

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

css：

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

下面是一个似乎对我有效的简单解决方案（4步修复！！）。该示例使用宽度来确定整体大小，但您也可以将其翻转以使用高度。

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

例如，

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

您必须告诉浏览器您放置它的高度：

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

编辑：以前基于表格的图像定位在Internet Explorer 11中存在问题（max-height在display:table元素中不起作用）。我将其替换为基于内联的定位，它不仅在Internet Explorer 7和Internet Explorer 11中都能正常工作，而且需要的代码也更少。

这是我对这个主题的看法。只有当容器有指定的大小时，它才会起作用（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 images enclosed in anchors in Internet Explorer */}

超文本标记语言：

<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 images enclosed in anchors in Internet Explorer */}
/* 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>

编辑：使用JavaScript可能进一步改进（放大图像）：

function fixImage(img){var $this = $(img);var parent = $this.closest('.picture-frame');if ($this.width() == parent.width() || $this.height() == parent.height())return;
if ($this.width() > $this.height())$this.css('width', parent.width() + 'px');else$this.css('height', parent.height() + 'px');}
$('.picture-frame img:visible').each(function{if (this.complete)fixImage(this);elsethis.onload = function(){ fixImage(this) };});
小开

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

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

当然，不要忘记包含其他必要的属性，如src和alt。

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

小开

我有更好的解决方案，不需要任何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>

您可以独立设置最大宽度和最大高度；图像将尊重最小的图像（取决于图像的值和长宽比）。您还可以根据需要设置图像对齐（例如，对于无限白色背景上的产品图片，您可以轻松地将其定位到中心底部）。

小开

看看我的答案使图像响应-最简单的方法 

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

作为在这里回答，如果在浏览器上不起作用，您也可以使用vh单位而不是max-height: 100%（如Chrome）：

img {max-height: 75vh;}
小开

最简单的方法是使用object-fit：

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

如果您使用的是Bootstrap，只需添加img-responsive类并更改为

.container img{object-fit: cover;}
小开

所有提供的答案，包括接受的答案，在假设div包装器具有固定大小的情况下工作只有。所以这是如何做到的无论div包装器的大小是，如果你开发一个响应式页面，这是非常有用的：

在你的#0选择器中写这些声明：

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

然后将这些声明放在#0选择器中：

width: "100%" /* Obligatory */max-height: anyValueYouWant /* (In px or %) */

非常重要：

对于#1和#2选择器，maxHeight的值必须是相同。

小开

您有两种使图像响应的方法。

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

    #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标签来放置图像，因为就seo而言，它比background-image更好，因为您可以在img标签的alt中写入关键词。所以这里是您可以使图像响应。

  2. 当图像在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>

    运行它这里

小开

以下内容非常适合我：

img{height: 99999px;object-fit:contain;max-height: 100%;max-width: 100%;display: block;margin: auto auto;}
小开

一个简单的解决方案是使用Flexbox。将容器的CSS定义为：

.container{display: flex;justify-content: center;align-items: center;align-content: center;overflow: hidden;/* Any custom height */}

将包含的图像宽度调整为100%，您应该在容器中获得一个漂亮的居中图像，并保留尺寸。

小开

如果您使用的是Bootstrap，您只需要将img-responsive类添加到img标记：

<img class="img-responsive" src="img_chania.jpg" alt="Chania">

引导图像

小开

我使用以下代码修复了这个问题：

<div class="container"><img src="image_url" /></div>
.container {height: 75px;width: 75px;}
.container img {object-fit: cover;object-position: top;display: block;height: 100%;width: 100%;}
小开

我看到很多人都建议对象拟合，这是一个很好的选择。但是如果你想让它在旧浏览器以及中工作，还有另一种简单的方法。

这很简单。我采用的方法是使用绝对和把它放在正中央的组合将图像定位在容器内：

position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);

一旦它在中心，我给图像，

// For vertical blocks (i.e., where height is greater than width)height: 100%;width: auto;
// For horizontal blocks (i.e., where width is greater than height)height: auto;width: 100%;

这使得图像获得object-fit:cover的效果。

下面是上述逻辑的演示。

https://jsfiddle.net/furqan_694/s3xLe1gp/

这个逻辑适用于所有浏览器。

小开

这篇文章可以帮助你：

  .square {position: relative;width: 300px;height: 300px;overflow: hidden;}img {position: absolute;max-width: 100%;width: 100%;height: auto;top: 50%;left: 50%;transform: translate( -50%, -50%);}img.landscape {height: 100%;width: auto;}
<div class="square"><img src="https://unsplash.it/400/500" alt="Image" /></div><div class="square"><img src="https://unsplash.it/500/400" class="landscape" alt="Image" /></div>

简单的CSS解决方案：如何在设置容器中适应不同维度的图像（2017-05-01）

  .square {position: relative;width: 441px;height: 200px;overflow: hidden;border:1px solid black;}img {max-width: 100%;/*     width: 100%;*/<----it stretch image and fit into the parentheight: auto;/*     transform: translate( -50%, -50%);*/<-----set vertically and horizontally center}img.landscape {height: 100%;width: auto;}
<div class="square"><img src="https://cdn.pixabay.com/photo/2020/08/28/12/32/man-5524488__340.jpg" alt="Image" /></div>

小开

正如我在2014coDepen示例中看到的那样，我做了一个解决方案，可以在尽可能少的javascript的帮助下，对任何未知的宽/高组合（纵横比）进行工作，以更改当容器的纵横比高于/低于图像的长宽比时图像如何居中的CSS：

尝试通过拖动右下角来调整容器的大小：

// Detects when the window width is too narrow for the current image// aspect-ratio, and fits it to height 100% instead of width 100%.const photo = document.images[0]
const onPhotoResize = new ResizeObserver(entries =>window.requestAnimationFrame(checkRatio))
onPhotoResize.observe(photo.parentNode)
function checkRatio(){const photoParent = photo.parentNode,imageAspectRatio = photo.clientWidth / photo.clientHeight,parentAspectRatio = photoParent.clientWidth / photoParent.clientHeight        
photo.classList[imageAspectRatio > parentAspectRatio ? 'add':'remove']('max')}
.box{width: 20%;height: 60%;margin: auto;position: absolute;top:0; left:0; right:0; bottom:0;resize: both;overflow: hidden;border: 5px solid red;}
.box > img{position: absolute;top: 50%;left: 50%;width: 100%;transform: translate(-50%, -50%);}
.box > img.max{ width:auto; height:100%; }
<div class='box'><img src="https://upload.wikimedia.org/wikipedia/commons/6/6a/Mona_Lisa.jpg"></div>

小开

这是我的解决方案。你需要插入两次图片。但它不使用js，img会调整宽度和高度。你可以点击运行代码片段-整页，打开开发控制台并调整窗口宽度以查看响应效果。

    /* responsive width */.responsivewidth{background: lightsalmon;height: 100px;width: 50%;}/* Widthlimit */.maxedbywidth {background: navy;height: 200px;width: 100px;}.div1 {max-height: 100%;position: relative;box-sizing: content-box;
/* Center: */top: 50%;transform: translateY(-50%);}.margerimg {height: auto;max-width: 100%;opacity: 0;}.div2 {height: 100%;width: fit-content;position: absolute;top: 0;
/* Center: */left: 50%;transform: translateX(-50%);}.mainimg {max-height: 100%;max-width: 100%;}
<div class="responsivewidth"><div class="div1"><img class="margerimg" src="https://via.placeholder.com/2000x1500" /><div class="div2"><img class="mainimg" src="https://via.placeholder.com/2000x1500" /></div></div></div><div class="maxedbywidth"><div class="div1"><img class="margerimg" src="https://via.placeholder.com/2000x1500" /><div class="div2"><img class="mainimg" src="https://via.placeholder.com/2000x1500" /></div></div></div>

小开

有几种方法可以将图像拟合到<div>。

img {object-fit: cover;}

CSS对象拟合属性用于指定如何调整<img>或<video>的大小以适应其容器。

这个属性告诉内容以各种方式填充容器；例如“保持长宽比”或“伸展并占用尽可能多的空间”。

  • 填充-这是默认值。图像将调整大小以填充给定的维度。如果需要，图像将被拉伸或压扁以适应
  • 包含-图像保持其长宽比，但调整大小以适应给定的维度
  • 封面-图像保持其长宽比并填充给定的维度。图像将被裁剪以适应
  • 无-图像未调整大小
  • 缩小-图像缩小到无或包含的最小版本

您可以找到更多工作示例这里。


提交答案