CSS将图像缩小以适应包含的div，而不指定原始大小

Question

CSS将图像缩小以适应包含的div，而不指定原始大小

53

我希望能有一个网站，可以上传不同大小的图片并在 jQuery 轮播中展示。我无法将图像缩放适应包含它们的 div 中。这是我打算做的方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>  
</body>
</html>

并且CSS

#wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

我已经尝试在CSS中将图片的最大宽度设为100％。但是没有效果。

- Muteking

尝试使用＃im img {display：block; height：100％; width：100％;}，但小图像可能看起来不好..！ - Vivek Vikranth

1

奇怪的是你说将图像的max-width设置为100％没有帮助。它完美地工作。 - user

1

可能是重复的问题：图像自动调整大小以适应div容器 - user

11个回答

19

我知道这是一个老问题，但它在几个相关的Google搜索中排名前五。以下是仅使用CSS而无需将图像更改为背景图像的解决方案：

width: auto;
height: auto;
max-width: MaxSize;
max-height: MaxSize;

“MaxSize”是一个占位符，你可以用像素或百分比来设置max-width和max-height。使用auto将增加（或减少）宽度和高度以占据您在MaxSize中指定的空间。它将覆盖您或查看器浏览器可能为图像设置的任何默认值。我发现这在Android的Firefox上尤其重要。像素或百分比都适用于最大尺寸。如果同时将高度和宽度都设置为auto，则原始图像的宽高比将保留。

如果您想完全填充空间并不介意图像比其原始大小要大，请将两个max-width更改为min-width: 100%-这将使它们完全占据其空间并保持纵横比。您可以通过Twitter个人资料的背景图片看到此示例。

- Woody Payne

1

“MaxSize” 的支持情况如何？ - crmpicco

1

这只是一个占位符，用于设置所需的最大宽度和最大高度，以像素或百分比为单位（前提是父级已设置宽度和高度）。 - Woody Payne

能否具体说明哪些部分不起作用？仅仅说“不起作用”很难进行故障排除 :) - Woody Payne

@WoodyPayne 这些代码应该放在哪里？是放在 div 对象内还是需要访问 custom.css 文件？ - FaCoffee

请注意将此内容添加到 img 元素本身，而非其容器。 - Sz.

8

如果你想要宽度和高度，可以尝试以下代码：

 background-size: cover !important;

但是这不会扭曲图像，而是填充整个 div。

- Chathuranga

5

我相信这是最好的方式，我已经尝试过并且它非常有效。

#img {
  object-fit: cover;
}

这是我找到的地方。点击此处。祝你好运！

- Josh Werner

目前浏览器支持不佳，否则这将是最佳解决方案。 - CrazyTim

3

很简单，只需将img的宽度设置为100%即可。

- Nikhil Rathod

这对于宽高比小于1的图像不起作用。 - psiyum

如果 div 容器比图像大，这也会放大图像。 - Mike N

2

希望这能解决一个古老的问题（不使用CSS的background属性）。

Html

<div class="card-cont">
 <img src="demo.png" />
</div>

Css

.card-cont{
  width:100%;
  height:150px;
}

.card-cont img{
  max-width: 100%;
  min-width: 100%;
  min-height: 150px;
}

- Moonis Abidi

1

我正在使用这个，包括小图和大图：

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}

- Flavio

1

我遇到了同样的问题，并使用以下CSS进行了修复。希望这能帮到你。

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

.parent {
  border: 1px solid black;
  width: 200px;
  height: 100px;
}
.image {
  max-width: 100%;
  max-height: 100%;
  width: max-content;
  height: max-content;
  border: 1px solid black;
}

<div class='parent'>
  <img class='image' alt='' src="https://avatars.githubusercontent.com/u/95250818?v=4"></img>
</div>

- Bikas Lin

1

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Ethan

0

其中有几个方法对我不起作用... 但是这个可以。也许会帮助其他人。以下是CSS：

    .img-area {
     display: block;
     padding: 0px 0 0 0px;
     text-indent: 0;
     width: 100%;
     background-size: 100% 95%;
     background-repeat: no-repeat;
     background-image: url("https://yourimage.png");

    }

- Blake

0

在一个网页中，我想让一张图片随着浏览器大小的改变而缩放，并保持在固定div旁边的顶部，我只需要使用一行CSS代码：overflow:hidden;就可以了。这张图片可以完美地缩放。

特别好的是，这是纯CSS，即使JavaScript被关闭也能正常工作。 CSS：

#ImageContainerDiv {
  overflow: hidden;
}

HTML：

<div id="ImageContainerDiv">
  <a href="URL goes here" target="_blank">
    <img src="MapName.png" alt="Click to load map" />
  </a>
</div>

- user4864716

3

对于大型图像，它会裁剪/隐藏多余部分而不是缩小图像。 - MichaelZ

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

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

- dc5 · Accepted Answer

你可以使用背景图片来实现这个效果；

摘自 MDN - background-size 属性: contain:

此关键字指定背景图片应缩放为尽可能大，同时确保其两个维度均小于或等于背景定位区域的相应维度。

演示

CSS:

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML：

<div id="wrapper">
    <div id="im">
    </div>
</div>