我是programmin的新手，我正在嘗試制作一個網站，但我堅持的部分是嘗試制作一排影像，這些影像在網站縮小時會隨著網站縮小。相反，當您縮小瀏覽器時，圖片會向下移動。沒有圖片它可以正常作業，但是每當我添加圖片時，它就會變得很奇怪。
這是代碼
<!DOCTYPE html>
<html lang="en">
<head>
<title> Da Bois!</title>
<link rel="stylesheet" href="CSS">
</head>
<div class="background">
<body>
<div>
<h1>
Da bois
</h1>
<br>
<h2>Introducing da Bois!
</h2>
<h3>
First up we have got!
</h3>
<div class="flexbox-container">
<div class="flexbox-item flexbox-item-1">
<div><a href="issastat.html"> <img class="emo-issa" src="images/issa-small.jpg"
alt="emo ass guy "></a></div>
</div>
<div class="flexbox-item flexbox-item-2">
<div><a href="issastat.html"> <img class="emo-issa" src="images/issa-small.jpg"
alt="emo ass guy "></a> </div>
</div>
<div class="flexbox-item flexbox-item-3">
<div><a href="issastat.html"> <img class="emo-issa" src="images/issa-small.jpg"
alt="emo ass guy "></a>
</div>
</div>
.flexbox-container{
display: flex;
flex-wrap: wrap;
}
.flexbox-item {
width: 200px;
border: 3px solid #333;
background-color: white;
border-radius: 100px;
flex-grow: 0;
flex-basis: auto;
display: flex;
flex-direction: row;
}
.flexbox-container img{
width: 100%;
height: 30rem;
display: inline-block;
}
}
}
.emo-issa{
width: 100%;
height: 100%;
flex-shrink: 0;
border-radius:100px;
}
.flexbox-item-1 {
flex-shrink: 1;
}
.flexbox-item-2 {
flex-shrink: 1;
}
.flexbox-item-3 {
flex-shrink: 1;
}
uj5u.com熱心網友回復：
您可以添加 ' flex-wrap: nowrap; ' 使彈性專案保持在單行中。并制作影像
width: 100%;
height: fit-content;
使影像自動調整大小
uj5u.com熱心網友回復：
當你想制作回應式網路（收縮網路）時，你可以使用 flexbox，你可以使用
@媒體查詢
.container {
margin: 50px auto;
width: 800px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.gambar {
width: 25%;
}
.gambar img {
width: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="your-css.css">
<title>Galery</title>
</head>
<body>
<div class="container">
<div class="image"><img src="Your-image.jpeg" alt=""></div>
<div class="image"><img src="Your-image.jpg" alt=""></div>
<div class="image"><img src="Your-image.png" alt=""></div>
<div class="image"><img src="Your-image.jpg" alt=""></div>
<div class="image"><img src="Your-image.jpg" alt=""></div>
</div>
</body>
</html>uj5u.com熱心網友回復：
洗掉flex-wrap. 另外，我從您的代碼中洗掉了很多代碼。不需要他們：
.flexbox-container {
display: flex;
}
.flexbox-item {
width: 20%;
height: 80vh;
border: 3px solid #333;
background-color: white;
border-radius: 100px;
flex-grow: 0;
display: flex;
}
.flexbox-container img {
width: 100%;
height: 100%;
border-radius: 100px;
}<div>
<h1>
Da bois
</h1>
<br>
<h2>Introducing da Bois!
</h2>
<h3>
First up we have got!
</h3>
<div class="flexbox-container">
<div class="flexbox-item flexbox-item-1">
<div>
<a href="issastat.html"> <img class="emo-issa" src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="emo ass guy "></a>
</div>
</div>
<div class="flexbox-item flexbox-item-2">
<div>
<a href="issastat.html"> <img class="emo-issa" src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="emo ass guy "></a>
</div>
</div>
<div class="flexbox-item flexbox-item-3">
<div>
<a href="issastat.html"> <img class="emo-issa" src="https://s4.uupload.ir/files/5c29cf910a706_8m.jpg" alt="emo ass guy "></a>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/435022.html
下一篇：Vue中的抖動效果