Bea*_*iie 97 html css gallery lightbox
我已经尝试了几天来配置我的缩略图库,所以所有图像都显示相同的高度和宽度.但是当我将Css代码更改为时,
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
我得到的图像大小都相同,但纵横比被拉伸毁了图像.有没有办法调整图像容器的大小而不是图像？让我保持纵横比.但仍然调整图像大小.(我不介意我切掉一些图像.)
提前致谢!
jac*_*Joe 167
这是CSS调整大小的已知问题,除非所有图像具有相同的比例,否则您无法通过CSS执行此操作.
最好的方法是拥有一个容器,并调整图像的一个维度(总是相同).在我的例子中,我调整了宽度.
如果容器具有指定的尺寸(在我的示例中为宽度),当告诉图像的宽度为100%时,它将使其成为容器的整个宽度.将auto在高度将会使图像具有高度成正比的新宽度.
例如:
HTML:
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>
CSS:
.container {
width: 200px;
height: 120px;
}
/* resize images */
.container img {
width: 100%;
height: auto;
}
Nic*_*los 37
您需要固定一侧(例如高度)并将另一侧设置为auto.
例如
height: 120px;
width: auto;
这将仅基于一侧缩放图像.如果您发现裁剪图像可以接受,您可以设置
overflow: hidden;
到父元素,它会裁掉任何超出其大小的东西.
dmi*_*nov 22
你可以使用object-fitcss3属性
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.holder {
display: inline;
}
.holder img {
max-height: 200px;
max-width: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class='holder'>
<img src='meld.png'>
</div>
<div class='holder'>
<img src='twiddla.png'>
</div>
<div class='holder'>
<img src='meld.png'>
</div>
</body>
</html>然而,这并不完全是你的答案,因为它不会拉伸容器,但它的行为就像画廊一样,你可以保持img自己的造型.
该解决方案的另一个缺点仍然是对css3属性的不良支持.有关详细信息,请访问:http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/.jQuery解决方案也可以在那里找到.
要使图像可调/灵活,您可以使用:
/* fit images to container */
.container img {
max-width: 100%;
height: auto;
}
transform: scale(0.5);
<div>Normal</div>
<div class="scaled">Scaled</div>
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
background-color: pink;
}
请参阅scale()。
把它作为你的持有人的背景,例如
<div style="background:url(path/to/image/myimage.jpg) center center; width:120px; height:120px;">
</div>
这将使您的图像居中于120x120 div内,从而切断任何多余的图像