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


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


当前回答

正如我在2014年Codepen示例中所看到的,我已经制定了一个解决方案,可以在尽可能少的javascript的帮助下处理任何未知的宽度/高度(纵横比)组合,以在容器的纵横比高于/低于图像的纵横比时更改图像居中的CSS:

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

//检测当前图像的窗口宽度是否过窄//并且适合于100%的高度而不是100%的宽度。const photo=文档.images[0]const onPhotoResize=新建ResizeObserver(条目=>window.requestAnimationFrame(checkRatio))onPhotoResize观察(photo.parentNode)函数checkRatio(){const photoParent=photo.parentNode,imageAspectRatio=照片客户端宽度/照片客户端高度,parentAspectRatio=photoParent.clientWidth/photoPrent.clientHeightphoto.classList[imageAspectRatio>parentAspectRatio?'add':'remove']('max')}.box格式{宽度:20%;高度:60%;边距:自动;位置:绝对;顶部:0;左:0;右:0;底部:0;调整大小:两者;溢出:隐藏;边框:5px纯红色;} .box>img{位置:绝对;顶部:50%;左:50%;宽度:100%;转换:转换(-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>

其他回答

目前,对于固定大小的图像(如JPEG或PNG文件),无法以确定性的方式正确执行此操作。

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

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

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

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

您只需确保SVG文件中没有在<SVG>标记中设置这些财产:

height
width
viewbox

大多数矢量绘图程序在导出SVG文件时都会设置这些财产,因此每次导出时都必须手动编辑文件,或者编写脚本来进行编辑。

当图像太小时,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%。这更简单。

事实证明,还有另一种方法可以做到这一点:对象拟合。

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

将完成工作。当然,不要忘记包含其他必要的属性,如src和alt。

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

查看我的解决方案: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{
   height: 99999px;
   object-fit:contain;
   max-height: 100%;
   max-width: 100%;    
   display: block;
   margin: auto auto;
}