Html/css：使用适合内容宽度的 figcaption 创建响应式图片库网格
Posted
技术标签:
【中文标题】Html/css：使用适合内容宽度的 figcaption 创建响应式图片库网格【英文标题】：Html/css: Create responsive image gallery grid with figcaption that fits width of content 【发布时间】：2022-01-20 03:41:58 【问题描述】：目标：我正在尝试使用 flexbox 为我的网站创建一个图片库网格
-
可以包含任意数量的照片，
在底部包含一个描述图像的文本 figcaption，并且
对移动设备具有响应性。
问题：我正在努力让宽度在网格容器上正常工作。它似乎拉伸到父 div 宽度的 100%，我无法让它缩小以适应 图像和文本 figcaption 的内容。
*
box-sizing: border-box;
#container
width: 800px;
margin: 0 auto;
.gridcontainer
margin: 0 auto;
border: 2px solid #54d9ff;
border-style: outset;
.gridbox
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -moz-flex;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
.gridbox img
height: max-content;
width: 30%;
margin-top: 15px;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
@media screen and (max-width: 600px)
.gridbox img
width: 90%;
.gridtext
padding: 5px;
margin-top: 15px;
text-align: center;
color: blue;
font-weight: bold;
background-image: linear-gradient(#c4c4c4, #787878);
<body>
<div id="container">
<div class="gridcontainer">
<div class="gridbox">
<img src="https://i.picsum.photos/id/820/200/300.jpg?hmac=oyShjC6apmZncG0xgz0zZEnh_1_j8eCRZnF8QxQ_PsE"/>
<!--<img src="https://i.picsum.photos/id/641/300/400.jpg?hmac=1xemcP7Oep2uO8c3Ekp3XcwY1S57YinXY4DTBd_GBbg"/>
<img src="https://i.picsum.photos/id/296/150/150.jpg?hmac=SSKcpx6mZuURJcKscRI27o7N2eS9iOh90116Rbdv1oc"/>
<img src="https://i.picsum.photos/id/541/600/270.jpg?hmac=qunG5B_lvK78sqhpBtHAPCRlMr6ciT2ZvMbxd6-8Mis"/>
<img src="https://i.picsum.photos/id/363/500/300.jpg?hmac=LZnmPmpU0TqF3LE_p3fn--rmS-Qwlc3pXmBS-Aax_2k"/>-->
</div>
<div class="gridtext">
Images from Lorem Picsum
</div>
</div>
</div>
</body>这个 3 列网格显示父 Div 的 100% 宽度。考虑到有多个图像，这没关系。
这是一个 1 列网格，但容器 div 仍拉伸到父 div 的 100%。这不行，因为我希望容器缩小到图像和 figcaption 的内容。
【问题讨论】：
您必须展示当前 html/css 的相关部分，以获取有关如何执行此操作的提示；但我想说grid 比flexbox 布局更适合您（它们非常相似；grid 实际上是flex 的扩展）。
欢迎来到 Stack Overflow！访问help center，使用tour 了解内容和How to Ask。请首先>>>Search for related topics on SO，如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] 记录输入和预期输出sn-p 编辑器。
@Raxi 我刚刚添加了 HTML 和 CSS。我会查看网格，看看是否有帮助。
【参考方案1】：
使用 Bootstrap 试试这个模板
<html>
<head>
<!--Basic Page Needs-->
<meta charset="utf-8">
<title>Image Gallery</title>
<!-- Mobile Specific Metas-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
<!--bootstrap.min css-->
<link rel="stylesheet" href="https://demo.themefisher.com/aviato/plugins/bootstrap/css/bootstrap.min.css">
</head>
<body>
<section class="products section bg-gray">
<div class="container">
<div class="row">
<div class="title text-center">
<h2>Products</h2>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-1.jpg" >
</div>
<div>
<h4><a href="product-single.html">Reef Boardsport</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-2.jpg" >
</div>
<div>
<h4><a href="product-single.html">Rainbow Shoes</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-3.jpg" >
</div>
<div>
<h4><a href="product-single.html">Strayhorn SP</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-4.jpg" >
</div>
<div>
<h4><a href="product-single.html">Bradley Mid</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-5.jpg" >
</div>
<div>
<h4><a href="product-single.html">Rainbow Shoes</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-6.jpg" >
</div>
<div>
<h4><a href="product-single.html">Rainbow Shoes</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<span class="bage">Sale</span>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-7.jpg" >
</div>
<div>
<h4><a href="product-single.html">Rainbow Shoes</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-8.jpg" >
</div>
<div>
<h4><a href="product-single.html">Rainbow Shoes</a></h4>
</div>
</div>
</div>
<div class="col-md-4">
<div>
<div>
<img class="img-responsive" src="https://demo.themefisher.com/aviato/images/shop/products/product-9.jpg" >
</div>
<div>
<h4><a href="product-single.html">Rainbow Shoes</a></h4>
</div>
</div>
</div>
</div>
</div>
</section>
【讨论】：
以上是关于Html/css：使用适合内容宽度的 figcaption 创建响应式图片库网格的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Swift 缩放 HTML 内容以使其适合手机宽度？
html+css（左边宽度高度，右边自动占满，右边内容过大左边自动缩小，内容三个点显示）