我有一個正在為客戶制作的網站。一切都很順利,直到我遇到了一個看似簡單的問題,但我以前從未遇到過這個問題,也找不到解決方案。我正在嘗試設置一個 2 列處理,一側為標題和文本,另一側為圖像。我的圖像和文本位于各自的容器 div 內。div 的顯示設置為“inline-block”,因此圖像不會縮小以適合其 div 內部。有一個簡單的解決方案嗎?這是代碼:超文本標記語言<div class="col"> <h1>Header</h1> <p>Text</p></div><div class="col"> <img src="images/img1.jpg" alt="Image"></div>CSS.col { display: inline-block; width: 45%; vertical-align: top; margin-bottom: 20px;}再說一次,我知道這可能非常簡單(或者由于某種原因完全不可能),但任何幫助將不勝感激。
1 回答

侃侃爾雅
TA貢獻1801條經驗 獲得超16個贊
只需添加width: 100%到 CSS 中即可。
.col img {
width: 100%;
}
或者你可以把它放在<img>標簽中:
<div class="col">
<img src="images/img1.jpg" alt="Image" width="100%">
</div>
圖像將根據父元素的最大寬度按比例增長。如果您沒有顯式設置寬度,它將以其原始大小呈現。
- 1 回答
- 0 關注
- 99 瀏覽
添加回答
舉報
0/150
提交
取消