橫幅圖像將無法顯示正確的尺寸

我的橫幅圖像顯示不正確。我在我的index.html文檔中有三個旋轉圖片的滾動橫幅。我試圖預先將3張圖片放大到標準的1920 x 800像素。只有一個圖片似乎正確顯示。另外兩個在右側留下空間，1在底部也沒有正確顯示。如您所見，我甚至有行項屬性來控制寬度（data-image-width='1920'）和高度（data-image-height='800'）。橫幅圖像將無法顯示正確的尺寸

將鼠標懸停在圖像上時，所有三個圖像的尺寸均爲1440×600像素（自然：1920×800像素）。我也有我的styles.css文件中的CSS來控制圖像駐留的main-baner類。

.main-baner {position: relative; float: left; width: 100%; margin-top: 50px; height: 600px;} 
.main-baner img {width: 100%; height: auto;}

任何想法爲什麼圖像不顯示爲標準尺寸？

來源

2017-02-16 jcbridwe

您的代碼**應該**正確處理您的圖片，但爲了讓我們確切解決導致問題的原因，請更新您的問題，以便它顯示所有相關代碼[最小，完整和可驗證示例]（http://stackoverflow.com/help/mcve）。有關詳細信息，請參閱[幫助文章]（http://stackoverflow.com/help/how-to-ask），瞭解如何提出良好問題。 –

保存自己的麻煩，並通過'background-image：url（插入url）將'img'元素轉換爲'div';背景大小：cover'。圖像將盡可能大地填充而不會擠壓。 – Skylark

.center_img{
width: 100%;
}

使用圖像類100％。

來源

2017-02-16 01:51:23

明白了。我在div中爲內容不良的圖像內嵌了'style ='width：100％「，但它並未應用於'center_img'類本身。謝謝。 – jcbridwe

橫幅圖像將無法顯示正確的尺寸

回答

相關問題