如何在保持纵横比的同时自动调整图像大小

Question

如何在保持纵横比的同时自动调整图像大小

htmlcssimageaspect-ratio

2081

如何自动调整大小的大图像，使其适应较小宽度的

容器，同时保持其宽度：高度比例？

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

- 001

2

一些有趣的库，用于调整图像大小以适应容器：

http://plugins.jquery.com/project/myimgscale
http://code.google.com/p/jquery-imagefit-plugin/

- Maxime Pacary

除了 @Kevin 的回答之外，您还可以使用像 ImageBoss 这样的服务根据您的要求创建所需大小的图像。将图像适配到容器上是很好的，但响应式地提供图像的效果更好。 - Igor Escobar

可能重复：https://dev59.com/i3I-5IYBdhLWcg3wYXH8 - jolumg

@jolumg 不完全是这样；虽然有些解决方案有很多重叠之处，但也有许多解决方案是不能互换的，因为这个问题是要求如何将图像放大，而这个问题是要求将图像缩小。 - TylerH

33个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dan · Answer 1

下面的代码是从之前的答案中改编而来，并且我使用了一个名为storm.jpg的图片进行了测试。

这是一个完整的HTML代码，用于显示图片。它非常完美，我使用www.resizemybrowser.com进行了测试。将CSS代码放在你的head部分下面的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>

- bancer · Answer 2

我这样在超链接中水平和垂直居中等比例缩放了一张图片：

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

有关居中的更多信息，请参见此处。

- Rick · Answer 3

您需要告诉浏览器放置位置的高度：

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

- young chisango · Answer 4

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

为图像容器（例如<img>）应用CSS样式
将宽度属性设置为所需尺寸
- 对于尺寸，请使用%表示相对大小或自动缩放（基于图像容器或显示屏）
- 使用px（或其他）表示静态或设置的尺寸
将高度属性设置为根据宽度自动调整
享受吧！

例如，

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

- user217447 · Answer 5

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-transform-origin:left top;。
使用缩放因子为4，您的最大宽度为400/4 = 100，最大高度为200/4 = 50。
另一种解决方案是将max-width和max-height设置为25%。这更加简单。

- Billal Begueradj · Answer 6

所有提供的答案，包括被接受的答案，仅在假设 div 包装器具有固定大小的情况下工作。因此，无论 div 包装器的大小如何，以下是如何操作的，并且如果您开发响应式页面，则非常有用：

在您的 DIV 选择器中编写以下声明：

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

然后将这些声明放在你的IMG选择器内：

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

非常重要:

maxHeight的值必须对DIV和IMG选择器相同。

- Joseph Lariosa · Answer 7

最简单的方法是使用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;
}

- vsync · Answer 8

正如我在2014年的Codepen例子中所展示的那样，我提出了一个解决方案，可用尽可能少的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>

- HoangYell · Answer 9

如果您正在使用Bootstrap，则只需将标签添加类即可：

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

Bootstrap Images

- user2796283 · Answer 10

通过一点数学，解决方案就容易了...

只需将图片放入一个div中，在HTML文件中指定图片时，使用图像的像素值以百分比设置宽度和高度值，以计算宽高比。

例如，假设有一张宽为200像素，高为160像素的图片。可以安全地说，宽度值将为100％，因为它是较大的值。然后，为计算高度值，只需将高度除以宽度，得出80％的百分比值。在代码中，它看起来像这样...

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