如何在多列布局中調整圖像大小？
[英]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
2 個解決方案
解決方案1
0 2022-09-26 19:06:17
您的圖像當前設置為占據容器的整個寬度。 因此，您的圖像寬度將根據頁面寬度和您選擇以該寬度顯示的容器數量進行調整。 我制作了一個版本並添加了一些常見的斷點，看看並讓我知道這是否是您想要做的。
.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
在我看來，通過用 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
CSS多列布局，窗口大小不會改變列間隙
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.