英文:
How do I make image shrink to flex column?
问题
我正在尝试创建一个包含图像的8列弹性网格，在8个项目后换行。我希望图像保持列的宽度。然而，图像保持其本机大小，而不会缩小到列的大小，列的大小通过flex-basis设置为12.5%。
我尝试为图像添加max-width，但它们仍然保持其本机大小。
我的问题是：无论图像有多大，我如何将它们限制在其12.5%的列内？
.container {
max-width: 80%;
}
.flex-grid {
display: flex;
flex-wrap: wrap;
flex-basis: 12.5%;
}
.flex-img {
max-width: 100%;
padding: 10px;
max-width: 100%;
}
<div class="container">
<div class="flex-grid">
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<!-- 其他图像项目 -->
</div>
</div>
英文:
I'm trying to create an 8-column flex grid that contains images that line breaks after 8 items. I want the images to stay the width of the column. However, the image is holding onto its native size and not reducing to the size of the column, which is set a 12.5% with flex-basis
I've tried adding a max-width to the image but they still hold onto their native size.
My question is; how can I contain images within their 12.5% column regardless of how big the image is?
<a href="https://codepen.io/mrthomason/pen/KKxMXrK">Here's a codepen</a>
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
max-width: 80%
}
.flex-grid {
display: flex;
flex-wrap: wrap;
flex-basis: 12.5%;
}
.flex-img {
max-width 100%;
padding: 10px;
max-width 100%;
}
<!-- language: lang-html -->
<div class="container">
<div class="flex-grid">
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/350"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 0
在大多数情况下，元素的大小来自外部（父元素），并且不依赖于固有大小时，通常更好的做法是使用grid。以下是我编辑您的代码以使其正常工作的方式。
.container {
max-width: 80%;
}
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
.img-wrapper {
padding: 10px;
}
.img-wrapper img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
<div class="container">
<div class="grid">
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<!-- 其余图像部分请参考上面的示例，省略了以保持简洁 -->
</div>
</div>
请注意，上面提供的是代码的翻译，其中CSS和HTML部分已经被翻译为中文。
英文:
In most cases where the size of an element is coming from the outside (parent) and doesn't rely on the intrinsic size, it is often the better idea to use a grid.
Here is how I edit your code to make it work.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
max-width: 80%;
}
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
.img-wrapper {
padding: 10px;
}
.img-wrapper img {
object-fit: cover;
width: 100%;
max-height: 100%;
}
<!-- language: lang-html -->
<div class="container">
<div class="grid">
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/350">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
<div class="img-wrapper">
<a href="https://placeholder.com">
<img src="https://via.placeholder.com/150">
</a>
</div>
</div>
</div>
<!-- end snippet -->
答案2
得分: 0
在图像本身上使用 max-width: 100% 来限制其宽度，同时对这些容器应用 width: 12.5% 和 box-sizing: border-box，即 .flex-img divs:
.container {
max-width: 80%;
}
.flex-grid {
display: flex;
flex-wrap: wrap;
}
.flex-img {
box-sizing: border-box;
padding: 10px;
width: 12.5%;
}
.flex-img img {
max-width: 100%;
}
<div class="container">
<div class="flex-grid">
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<!-- 其他 .flex-img 元素 -->
</div>
</div>
英文:
Use max-width: 100% on the image itself to restrict it to its containers width, and apply width: 12.5% and box-sizing: border-box to those containers, i.e. the .flex-img divs:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
max-width: 80%
}
.flex-grid {
display: flex;
flex-wrap: wrap;
}
.flex-img {
box-sizing: border-box;
padding: 10px;
width: 12.5%;
}
.flex-img img {
max-width: 100%;
}
<!-- language: lang-html -->
<div class="container">
<div class="flex-grid">
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/350"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
<div class="flex-img">
<a href="https://placeholder.com"><img src="https://via.placeholder.com/150"></a>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论