How to resize images in multi-column Layout?
Question
i'm trying to make a Masonry page working with multi-columns, but my images looks huge, not like they should.
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
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 answers
solution1
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>
solution2
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; 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.