我想有一个网站,我可以上传不同大小的图像,以便在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%.但这没有用.
dc5*_*dc5 53
您可以使用背景图像来完成此任务;
来自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>
Woo*_*yne 14
这是我所知道的一个老问题,但这是几个相关谷歌搜索的前五名.这是仅限CSS的解决方案,无需将图像更改为背景图像:
width:auto;
height:auto;
max-width:MaxSize;
max-height:MaxSize;
自动将增加(或减少)宽度和高度以占用您使用MaxSize指定的空间.它将覆盖您或观看者的浏览器可能具有的图像的任何默认值.我发现它在Android的Firefox上特别重要.像素或百分比适用于最大尺寸.将高度和宽度都设置为自动时,将保留原始图像的纵横比.
如果您想完全填充空间并且不介意图像大于其原始大小,请将两个最大宽度更改为最小宽度:100% - 这将使它们完全占据其空间并保持纵横比.您可以通过Twitter个人资料的背景图片查看此示例.
如果你想要宽度和高度,你可以尝试
background-size: cover !important;
但这不会扭曲图像,但填补div.
我相信这是最好的方法，我已经尝试过并且效果很好。
#img {
object-fit: cover;
}
我就是在这里找到的。祝你好运！
| 归档时间： |
|
| 查看次数： |
232219 次 |
| 最近记录： |