[英]How to resize images in multi-column Layout?
我正在尝试制作一个使用多列的 Masonry 页面,但我的图像看起来很大,不像它们应该的那样。
我怎样才能调整大小并使它们变小?
我试着给 the.container 添加一个填充,它在某种程度上起作用了,但是当你
改变屏幕尺寸是一场灾难,一切都变得非常小。
谢谢!
<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
您的图像当前设置为占据容器的整个宽度。 因此,您的图像宽度将根据页面宽度和您选择以该宽度显示的容器数量进行调整。 我制作了一个版本并添加了一些常见的断点,看看并让我知道这是否是您想要做的。
.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>
在我看来,通过用 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>
调整图像大小更改样式width:
in class .container-img img
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.