如何使用 CSS 僅水平調整圖像大小

Question

所以我試着做一個簡單的網站的小項目，我只想水平調整我的圖像大小。 所以它會使其從左到右適合頁面，並具有與正常高度相同的高度。 但是當我嘗試在 CSS 中使用width屬性並將其設置為 100% 時，它並沒有使我的圖像變長而是變大。

 .wide-pic{ width: 100%; }

 <img class="wide-pic" src="https://www.w3schools.com/cssref/mountain.jpg">

Answer 1

你可以給它一個靜態的高度和寬度。

.wide-pic {
   width: 100px; 
   height: 100px; 
}

你可能想添加 object-fit:cover;

Answer 2

在樣式中使用背景大小。

 #example1 { border: 2px solid black; padding: 25px; background: url(https://www.w3schools.com/cssref/mountain.jpg); background-repeat: no-repeat; background-size: 100% 50%; }

 <!DOCTYPE html> <html> <head> <style> </style> </head> <body> <h2>background-size: 100% 50%:</h2> <div id="example1"> <h2>Hello World</h2> <p>The size of the background image is set in percent of the parent element; 100% width and 50% height.</p> </div> </body> </html>

Answer 3

試試這個

.wide-pic{
   width: 100%; //give your size
   hight:100%; //give your size
   max-width:100%;
}

如何使用 CSS 僅水平調整圖像大小

問題描述

3 個解決方案

解決方案1
2 2021-07-09 09:17:03

解決方案2
1 已采納 2021-07-09 08:37:42

解決方案3
0 2021-07-09 08:43:35

如何使用 CSS 僅水平調整圖像大小

問題描述

3 個解決方案

解決方案1 2 2021-07-09 09:17:03

解決方案2 1 已采納 2021-07-09 08:37:42

解決方案3 0 2021-07-09 08:43:35

解決方案1
2 2021-07-09 09:17:03

解決方案2
1 已采納 2021-07-09 08:37:42

解決方案3
0 2021-07-09 08:43:35