创建响应式3 x 3画廊盒子
创建响应式3 x 3画廊盒子
提问于 2020-06-04 02:35:12
你好，我正在尝试创建一个灵活的网格，其中有3乘3图像画廊，这是响应性的，
目前，这是一个wordpress页面，这是我的图像使用openseadragon的代码。所以我需要这张图片：
当我得到正确的布局后，我将更新图像并添加更多的图像框，以使图像出现三次，并在底部出现三次。我也需要在每一行下面添加一点填充。
谢谢。
<style>
/* assumes reset with box-sizing:border-box; is in effect */
.gallery ul {
display:flex;
flex-wrap:wrap;
position:relative;
left:-1em;
/*
uncomment these if centering desired
max-width:63em;
margin:0 auto;
*/
}
.gallery li {
flex:1 1 auto;
padding:1em;
margin:0 0 1em 1em;
width:26%;
max-width:20em;
}
.gallery a {
text-decoration:none;
}
.gallery li img {
display:block;
max-width:100%;
height:auto;
margin:0 auto 1em;
}
</style>
<section class="gallery">
<h2>Describe this Gallery</h2>
<ul>
<li>
<div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
<p>
Some text about the image
</p>
</li>
<!-- repeat the above list-item here -->
<li>
<div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
<p>
Some text about the image
</p>
</li>
<li>
<div id="materials-01581" class="suarrmaterials-zoomable-image" style="height:400px; width:400px;" data-image="2013/02/DSC_0158-1-scaled.jpg"></div>
<p>
Some text about the image
</p>
</li>
</ul>
<!-- .gallery --></section>
回答 1
Stack Overflow用户
发布于 2020-06-07 03:12:32
我已经创建了两组示例，它们都是响应式布局。我建议在布局“中断”时设置一个断点，并将它们设置为1或2列。
具有完全相同纵横比的
- 图像。
- Pro: texts under images will align with the others on the same row, even while scaling.
- Con: images will be cut-off when the original image aspect ratio is to different from the wrapper aspect ratio which contains the image (landscape vs portrait for example).
不同宽高比的
- 图像的
- Pro: images will keep their aspect ratio and won't be cut-off.
- Con: texts under the images won't align with the others on the same row.
html,
body {
margin: 0;
padding: 0;
}
.gallery {
/* Negative margin = the padding of the wrapper. This ensures the boxes aligning against the left and right side of the container. Uncomment when this is not wanted. */
/*
margin-left: -1rem;
margin-right: -1rem;
*/
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: flex-start;
}
@media only screen and (max-width: 520px) {
.gallery {
flex-wrap: wrap;
}
}
/* Wrapper is needed to create extra space between gallery boxes in case a background color is needed. */
.gallery_image-wrapper {
padding: 1rem;
min-width: 8rem;
/* Don't Grow, Do Shrink, Base size of 33.33% */
flex: 0 1 33.33%;
@media only screen and (max-width: 520px) {
flex: 1 1 100%;
}
}
@media only screen and (max-width: 520px) {
.gallery_image-wrapper {
flex: 1 1 100%;
}
}
.gallery_image {}
.gallery_image-description {
word-wrap: break-word;
word-break: break-word;
}
.gallery_image-graphic {
margin: 0 0 1rem 0;
/* Add small spacing between image and description */
padding: 0 0 56.25% 0;
/* Ratio trick to make sure the images are the same size. */
background-size: cover;
/* Make sure the image is alway filling/covering the box */
background-repeat: no-repeat;
}
.gallery_image-graphic-inline {
max-width: 100%;
margin: 0 0 1rem 0;
display: block;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gallery Test</title>
</head>
<body>
<h2>Example 1 - As background images</h2>
<div class="gallery">
<div class="gallery_image-wrapper">
<div class="gallery_image">
<div class="gallery_image-graphic" style="background-image: url('https://via.placeholder.com/750x500.png?text=Image%20Example');"></div>
<div class="gallery_image-description">A random text about the image.</div>
</div>
</div>
<div class="gallery_image-wrapper">
<div class="gallery_image">
<div class="gallery_image-graphic" style="background-image: url('https://via.placeholder.com/750x500.png?text=Image%20Example');"></div>
<div class="gallery_image-description">If the image contains relevant information</div>
</div>
</div>
<div class="gallery_image-wrapper">
<div class="gallery_image">
<div class="gallery_image-graphic" style="background-image: url('https://via.placeholder.com/750x500.png?text=Image%20Example');"></div>
<div class="gallery_image-description">make sure to add it to your description.</div>
</div>
</div>
</div>
<h2>Example 2 - Inline images</h2>
<div class="gallery">
<div class="gallery_image-wrapper">
<div class="gallery_image">
<img class="gallery_image-graphic-inline" src="https://via.placeholder.com/750x500.png?text=Image%20Example" />
<div class="gallery_image-description">Image example 1</div>
</div>
</div>
<div class="gallery_image-wrapper">
<div class="gallery_image">
<img class="gallery_image-graphic-inline" src="https://via.placeholder.com/750x600.png?text=Image%20Example" />
<div class="gallery_image-description">Image example 2</div>
</div>
</div>
<div class="gallery_image-wrapper">
<div class="gallery_image">
<img class="gallery_image-graphic-inline" src="https://via.placeholder.com/750x400.png?text=Image%20Example" />
<div class="gallery_image-description">Image example 3</div>
</div>
</div>
</div>
</body>
</html>
更新
以防这是一个视窗元问题，你能检查一下你的头脑中是否有以下内容吗？
<meta name="viewport" content="width=device-width, initial-scale=1">
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62180244
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号