Question

为什么我的图像右边有空白区域？

HTML文件：

...
<body>
    <div class="image">
        <img src="image.jpg" alt="Picture here" id="image" align="middle"></img>
    </div>
</body>

这就是它的样子：

图像应该是长颈鹿。这个白色空间来自哪里？

Answer 1

不确定您是想要图片全宽还是白色bg颜色困扰您...

＆＃xA;＆＃xA;

确保您的图片div具有蓝色背景

＆＃xA;＆＃xA;

  .image {＆＃xA; background-color：＃4099FF;＆＃xA;}＆＃xA;

＆＃xA;＆＃xA;

或包装内容和图片的父级。在这种情况下你的身体

＆＃xA;＆＃xA;

  body {＆＃xA; background-color：＃4099FF;＆＃xA;}＆＃xA;

＆＃xA;

Answer 2

因为你没有填满整个页面你的图像很小而你的div不是全宽

div{
    width: 100%; // full width
}
img{
    height: auto;
    width: 100%
}

这将拉伸以填充空白

Answer 3

取决于你想要做什么，如果你想让图像拉伸整个宽度，你可以设置宽度：100％，但这可能会导致非常像素化的图像，我不推荐这个

您可能最好将图像放在全宽div中，将div，s背景颜色设置为蓝色并使图像居中，或将其定位在您想要的位置