横幅图像将无法显示正确的尺寸

我的横幅图像显示不正确。我在我的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

横幅图像将无法显示正确的尺寸

回答

相关问题