我正在我的活動網站上作業，我目前在我的關于部分中的影像的回應能力有問題。我正在嘗試更改我的影像，當我最小化瀏覽器時，影像也會調整為更小，但我找不到調整它并使其回應的方法。請幫助我。
#abouts {
background: #07414C;
display: inline-block;
width: 100%;
}
.about{
padding: 100px 0px;
background-color: #033541;
}
.about .about-picture img {
width: 430px;
}
.about-text{
width: 550px;
}
.main{
width: 1130px;
max-width: 95%;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
}
.about-text h2{
color: white;
font-size: 75px;
text-transform: capitalize;
margin-bottom: 20px;
}
.about-text h5{
color: white;
letter-spacing: 2px;
font-size: 22px;
margin-bottom: 25px;
text-transform: capitalize;
}
.about-text p{
color: white;
letter-spacing: 1px;
line-height: 28px;
font-size: 18px;
margin-bottom: 45px;
}
@media screen and (max-width: 768px) {
.about .main {
align-items: center;
text-align: center;
display: flex;
flex-direction: column;
}
.about .about-picture img {
max-width: 100%;
height: auto;
}
.about .main .about-text h5 {
width: 100%;
font-size: 18px;
text-align: center;
padding-right: 1.2rem;
padding-left: 1.2rem;
}
.about .main .about-text h2 {
width: 100%;
font-size: 50px;
text-align: center;
padding-right: 1.8rem;
padding-left: 1.8rem;
}
.about .main .about-text p {
width: 100%;
font-size: 15px;
text-align: justify;
padding-right: 2.8rem;
padding-left: 2.8rem;
}
}<!----about start---->
<div id = "abouts">
<section class="about">
<div class="main">
<div class = "about-picture">
<img src="aboutpic.jpg">
</div>
<div class="about-text">
<h2>About Me</h2>
<h5>word 1<span>, word 2, and word 3</span></h5>
<p>Name, age, place. school where im studying. things that i love. motto.</p>
</div>
</div>
</section>
</div>uj5u.com熱心網友回復：
本max-width應在像素，而不是簡單的定義width。
并且足以讓它變得流暢，不需要額外的媒體查詢代碼。
.about .about-picture img {
width: 100%;
max-width: 430px;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/342490.html
下一篇：將圖片放入乳膠中