CSS缩小图像以适应包含div，而不指定原始大小
我想有一个网站，我可以上传不同大小的图像显示在一个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％。 但是，这不工作。
你可以使用背景图像来完成这个;
来自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>
这是我知道的一个老问题，但是这是几个相关Googlesearch的前五名。 这里是CSS的唯一解决scheme，而不会将图像更改为背景图像：
width:auto; height:auto; max-width:MaxSize; max-height:MaxSize;
自动将增加（或减less）宽度和高度，占据您用MaxSize指定的空间。 它将超过您或浏览器的浏览器可能对图像的图像默认值。 我发现它在Android的Firefox上尤其重要。 像素或百分比适用于最大尺寸。 将高度和宽度设置为自动时，原始图像的高宽比将保留。
如果要完全填充空间，不介意图像比原始大小大，请将两个最大宽度更改为最小宽度：100％ – 这将使它们完全占据其空间并保持宽高比。 你可以通过Twitter个人资料的背景图片看到这个例子。
如果你想宽度和高度，你可以尝试
background-size: cover !important;
但这不会扭曲图像，但填补了分区。
这很简单。 只需将img的宽度设置为100％
我相信这是做这件事的最好方法，我已经尝试过了，而且效果很好。
#img { object-fit: cover; }
这是我find它的地方 。 祝你好运！
在我想要一个图像的网页中，随着浏览器大小的变化而变化，并保持在顶部，在一个固定的div旁边，我所要做的只是使用一个CSS线： overflow:hidden; 它做了诡计。 图像完美地缩放。
什么是特别好的是，这是纯粹的CSS，即使Javascriptclosures，将工作。
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>
我正在使用这个，小图像和大图像：
.product p.image { text-align: center; width: 220px; height: 160px; overflow: hidden; } .product p.image img{ max-width: 100%; max-height: 100%; }
这些东西中有几个对我来说不起作用，但是这样做。 将来可能会帮助别人。 这是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"); }
我用：
物体贴合：封面;
-o-object-fit：cover;
将图像放置在具有固定高度和宽度的容器中，这对我的滑块也很有用。 然而，它会根据图像的部分切割。
