我目前正在為我的網站設計移動視圖。網站上的影像在瀏覽器回應視圖中是正確的，但是當我在移動設備上查看該網站時，影像不正確。
我希望影像看起來像這樣：
然而它在手機上看起來像這樣：
容器隱藏overflow-y，圖片設定為width:100%,height:fit-content；
<div id="aboutIntro" class="flex-col">
<div id="imageContainer">
<img src="../../images/assets/aboutPic.jpg">
</div>
<section id="aboutIntroText" class="flex-col">
<hr class="small-hr">
<h2>Web Developer</h2>
<p><b>Hello. I’m Danny and I am a young professional filled with ambition. I currently attend university where I study software engineering. Outside of education I spend most of my time designing and building digital products.</b></p>
<hr class="small-hr">
<p>Last year, I set out focus on becoming a web developer. After attending training courses and dedicating myself I’ve curated all the necessary skills for success.</p>
</section>
</div>
#imageContainer{
display: flex;
justify-content: center;
overflow-x: hidden;
max-height: 427px;
overflow-y: hidden;
}
img{
height: fit-content;
width: 100%;
}
uj5u.com熱心網友回復：
將屬性添加到您的 imgobject-fit: contain
uj5u.com熱心網友回復：
使用object-fit: contain or 僅用于影像：background-size: cover;
uj5u.com熱心網友回復：
img{顯示：塊；高度：100%；寬度：100%}
物件適合填充 imageContainter，而我想溢位容器。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/481798.html