我正在使用百分比来缩放我网站上图库中的缩略图,但我无法使用 object-fit: cover
来处理它们。我正在尝试使用 object-fit
,这样我就可以让缩略图实际上是方形的,而不是图像本身具有的任何宽高比。
我的代码是这样的:
<div class="gallery">
<a href="#"><img class="tile" src="#"></a>
</div>
(a
和 img
标签在每个 gallery
div 中重复了很多次)
这是我的 CSS:
.gallery {
width: 100%;
max-width: 1400px;
min-width: 600px;
margin: 0 auto;
margin-top: 1rem;
font-size: 0px;
margin-bottom: 3rem;
}
.gallery img{
display: inline-block;
object-fit: cover;
width: 25%;
}
唯一有效的 object-fit
是 none
,它设法将它们包含在方形中,但也根本没有按比例缩小它们。
我认为除了百分比我不能使用其他东西,因为我需要缩略图在 gallery
div 本身缩小时缩小。
最佳答案
要得到一个正方形,高度应该等于宽度。如果您需要使用一定百分比的容器(在本例中为 .gallery
),您可以使用 maintain aspect ratio trick 来实现:
html,
body {
margin: 0;
}
.gallery {
width: 100%;
max-width: 1400px;
min-width: 600px;
margin: 0 auto;
margin-top: 1rem;
font-size: 0;
margin-bottom: 3rem;
}
.gallery a {
position: relative;
display: inline-block;
margin-left: 0.2rem;
margin-bottom: 0.2rem;
width: calc(25% - 0.2rem);
}
.gallery a::before {
display: block;
width: 100%;
padding-bottom: 100%;
content: "";
}
.gallery a img {
position: absolute;
top: 0;
height: 100%;
width: 100%;
object-fit: cover;
}
<div>
I'm the content above the gallery
</div>
<div class="gallery">
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
<a href="#"><img class="tile" src="https://c1.staticflickr.com/9/8456/8063950119_57b3cb8818_b.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
<a href="#"><img class="tile" src="https://c1.staticflickr.com/9/8456/8063950119_57b3cb8818_b.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
<a href="#"><img class="tile" src="https://c1.staticflickr.com/9/8456/8063950119_57b3cb8818_b.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
</div>
<div>
I'm the content below the gallery
</div>
如果你需要视口(viewport)宽度的百分比,你可以使用vw
:
body {
margin: 0;
}
.gallery {
width: 100%;
max-width: 1400px;
min-width: 600px;
margin: 0 auto;
margin-top: 1rem;
font-size: 0;
margin-bottom: 3rem;
}
.gallery img {
display: inline-block;
margin-left: 0.2rem;
margin-bottom: 0.2rem;
object-fit: cover;
width: calc(25vw - 0.2rem);
height: calc(25vw - 0.2rem);
}
<div class="gallery">
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/Mallard2.jpg/1200px-Mallard2.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/en/7/7d/Bliss.png"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/2/23/Hasegawa_Tohaku_-_Pine_Trees_%28Sh%C5%8Drin-zu_by%C5%8Dbu%29_-_right_hand_screen.jpg"></a>
<a href="#"><img class="tile" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/52/Yamaha_Clarinet_YCL-457II-22.tiff/lossy-page1-85px-Yamaha_Clarinet_YCL-457II-22.tiff.jpg"></a>
</div>
关于html - 适合对象 : cover with percentages,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45187525/