如何在多列布局中调整图像大小？
[英]How to resize images in multi-column Layout?
问题描述
i'm trying to make a Masonry page working with multi-columns, but my images looks huge, not like they should.
我正在尝试制作一个使用多列的 Masonry 页面，但我的图像看起来很大，不像它们应该的那样。
how can i resize and make them smaller?我怎样才能调整大小并使它们变小？
i've tried to add a padding to the.container, it worked in a way, but the moment you我试着给 the.container 添加一个填充，它在某种程度上起作用了，但是当你
change the screen size it's a disaster, all becomes very tiny.改变屏幕尺寸是一场灾难，一切都变得非常小。
Thanks!谢谢！
<div class="titolo">
<h1>Esercitazione</h1>
<h2>Riprodurre un layout</h2>
</div>
<div class="super">
<div class="container">
<img src="1.jpeg">
<img src="2.jpeg">
<img src="3.jpeg">
<img src="4.jpeg">
<img src="5.jpeg">
<img src="6.jpeg">
<img src="7.jpeg">
<img src="8.jpeg">
<img src="9.jpeg">
<img src="10.jpeg">
</div>
</div>
[![enter image description here][1]][1]
.titolo {
padding: 30px;
}
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
}
h2 {
text-align: center;
font-family: 'Times New Roman', Times, serif;
font-style: italic;
}
/* immagini */
.container {
column-count: 3;
column-gap: 20px;
margin:70px auto;
}
img {
width: 100%;
margin-bottom: 1em;
}
@media (max-width: 800px) {
.container {
column-count: 2;
}
}
@media (max-width: 400px) {
.container {
column-count: 1;
}
}
[1]: https://i.stack.imgur.com/5Q07p.jpg
2 个解决方案
解决方案1
0 2022-09-26 19:06:17
Your images are currently set to take up the full width of your container.您的图像当前设置为占据容器的整个宽度。 So the width of your images are going to adjust in relation to the width of the page and the number of containers you're choosing to display at that width.因此，您的图像宽度将根据页面宽度和您选择以该宽度显示的容器数量进行调整。 I made a version and added some common breakpoints, take a look and let me know if that's what you're looking to do.我制作了一个版本并添加了一些常见的断点，看看并让我知道这是否是您想要做的。
.titolo { padding: 30px; } h1 { text-align: center; font-family: 'Roboto', sans-serif; } h2 { text-align: center; font-family: 'Times New Roman', Times, serif; font-style: italic; } /* immagini */.container { column-count: 4; column-gap: 20px; margin:70px auto; } img { width: 100%; margin-bottom: 1em; } @media (max-width: 1200px) {.container { column-count: 3; } } @media (max-width: 992px) {.container { column-count: 2; } } @media (max-width: 768px) {.container { column-count: 1; } }
<div class="titolo"> <h1>Esercitazione</h1> <h2>Riprodurre un layout</h2> </div> <div class="super"> <div class="container"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> <img src="https://i.stack.imgur.com/5Q07p.jpg"> </div> </div>
解决方案2
0 2022-09-27 23:44:54
in my opinion to resize the image by wrapping it with a div element class .container-img which the style remains the same as before, but the img element must be styled width: 80%; margin: 0 auto;在我看来，通过用 div 元素 class .container-img包装图像来调整图像大小，其样式与以前相同，但 img 元素的样式必须为width: 80%; margin: 0 auto; width: 80%; margin: 0 auto;
[![enter image description here][1]][1]
.titolo {
padding: 30px;
}
h1 {
text-align: center;
font-family: "Roboto", sans-serif;
}
h2 {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-style: italic;
}
/* immagini */
.container {
column-count: 3;
column-gap: 20px;
margin: 70px auto;
}
.container-img {
width: 100%;
display: flex;
margin-bottom: 1em;
}
.container-img img {
width: 80%;
margin: 0 auto;
}
@media (max-width: 800px) {
.container {
column-count: 2;
}
}
@media (max-width: 400px) {
.container {
column-count: 1;
}
}
[1]: https://i.stack.imgur.com/5Q07p.jpg
<body>
<div class="titolo">
<h1>Esercitazione</h1>
<h2>Riprodurre un layout</h2>
</div>
<div class="super">
<div class="container">
<div class="container-img">
<img src="1.jpeg" />
</div>
<div class="container-img">
<img src="2.jpeg" />
</div>
<div class="container-img">
<img src="3.jpeg" />
</div>
<div class="container-img">
<img src="4.jpeg" />
</div>
<div class="container-img">
<img src="5.jpeg" />
</div>
<div class="container-img">
<img src="6.jpeg" />
</div>
<div class="container-img">
<img src="7.jpeg" />
</div>
<div class="container-img">
<img src="8.jpeg" />
</div>
<div class="container-img">
<img src="9.jpeg" />
</div>
<div class="container-img">
<img src="10.jpeg" />
</div>
</div>
</div>
</body>
to resize image change style width: in class .container-img img调整图像大小更改样式width: in class .container-img img
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.