52

我想有一个网站，我可以上传不同大小的图像以显示在 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%。但这不起作用。

4

10 回答 10

62

您可以使用背景图像来完成此操作；

来自 MDN -背景大小： 包含：

该关键字指定背景图像在确保其尺寸小于或等于背景定位区域的对应尺寸的同时，应尽可能地进行缩放。

演示

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>
于 2013-09-04T06:38:03.630 回答
19

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

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

“MaxSize”是您想要使用的任何内容的占位符，以像素或百分比为max-width单位。将增加（或减少）宽度和高度以占用您使用 MaxSize 指定的空间。它将覆盖您或查看者的浏览器可能对图像具有的任何默认图像。我发现它在 Android 的 Firefox 上尤为重要。像素或百分比适用于最大尺寸。将高度和宽度都设置为时，将保留原始图像的纵横比。max-heightautoauto

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

于 2015-06-07T22:34:20.677 回答
8

如果你想要宽度和高度，你可以试试

 background-size: cover !important;

但这不会扭曲图像但会填充 div。

于 2014-01-10T09:24:36.740 回答
4

我相信这是最好的方法，我已经尝试过了，效果很好。

#img {
  object-fit: cover;
}

这是我找到它的地方。祝你好运！

于 2016-11-21T20:38:23.663 回答
3

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

于 2013-09-04T06:19:51.923 回答
2

希望这将回答古老的问题（不使用 CSS背景属性）

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;
}
于 2018-03-13T13:02:40.080 回答
1

我正在使用这个，无论是小图像还是大图像：

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
于 2017-09-03T13:55:34.273 回答
0

我用：

适合对象：封面；
-o-object-fit：覆盖；

将图像放置在具有固定高度和宽度的容器中，这也适用于我的滑块。然而，它会根据它的不同切割部分图像。

于 2015-05-12T07:52:33.000 回答
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>
于 2015-05-14T02:37:19.780 回答
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");

    }
于 2017-10-27T18:37:48.127 回答