當我更改瀏覽器螢屏尺寸時，為什么此部分不包含在內？我使用了 HTML 和 CSS。當我將螢屏設為全尺寸時看起來不錯，但如果我將瀏覽器縮小，它不會顯示完整的內容。（它只顯示影像的一半，但顯示全文）它在較小瀏覽器上的外觀截圖]（https://i.stack.imgur.com/i9qiK.jpg）
.whoweare{
padding:80px 0px 50px;
background-color: #000000;
}
.whoweare .content {
-webkit-display: flex;
display: flex;
}
.whoweare .content .box{
padding:5px;
flex:0 0 100%;
max-width: 100%;
}
.whoweare .content .item-img {
width: 50%;
-webkit-transform: rotateY(180deg);
transform: rotateY(180deg);
padding: 30px;
}
.whoweare .content .item-text h2{
font-size: 50px;
font-weight: 500;
margin:20px;
color: #ffffff;
padding: 0px 0px 20px;
}
.whoweare .content .item-text p{
font-size: 20px;
line-height:50px;
color:#ffffff;
margin:20px;
padding:0px 0px 20px;
font-family: 'Open Sans', sans-serif;
}
.whoweare .content .class-items .item{
margin-bottom: 30px;
display: flex;
}
.whoweare .content .class-items .item .item-text{
padding: 15px;
display: flex;
flex-direction: column;
justify-content: center;
}
` <section class="whoweare" id="whoweare">
<dic class="container">
<div class="content">
<div class="box text wow slideInRight">
<div class="class-items">
<div class="item wow bounceInUp">
<div class="item-img">
<img src="images/ACD68359-D3EB-4302-99C0-E59A663380AB.jpeg" alt="classes" width="601"
height="751" />
</div>
<div class="item-text">
<h2>Who we are</h2>
<p>Our gym provides a unique experience </p>
</div>
</div>
</section>````
uj5u.com熱心網友回復：
更改 img 標簽的高度寬度。
使用 % 引數
例如
高度=50%
寬度=60%。
我認為 ?? 如果設計不好看，您還需要更改其他容器標簽的高度寬度
uj5u.com熱心網友回復：
您應該添加到所有重要的容器中`
.container
{
width:100%:
height: auto;
margin: auto;
}
//Also can try
.container
{
width: auto;
padding: 0;
}
那應該作業...
uj5u.com熱心網友回復：
問題
img具有特定的寬度和高度，因此即使它的容器（在你的情況下.item-img有width:50%;）它也會溢位。
回答
給出imgofwidth: 100%;和object-fit: contain or object-fit: cover如果你想裁剪它。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/527395.html