Question

对于该项目，我仅限使用html和CSS。我尝试扩展宽度，但是这使我无法进行水平滚动，所以我不想这样做。我也尝试使用px作为度量标准，但这也不起作用。

<img src="img/gallery.jpg" style="width:100%;height:90%;white-space:nowrap">

https://i.stack.imgur.com/wsxrk.png

Answer 1

使用width:100%，如下所示：

img{
  width:100%
}

Answer 2

您需要在图像上使用对象适合属性。这是一个演示：

.container {
  width: 500px;
  height: 500px;
  border: 1px solid #000;
}

.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <img src="https://via.placeholder.com/350x150" alt="">
</div>

Answer 3

有几种已知的消除白色间距的方法。这是最好的两个，IMO：

div {
  background-color: orange;
  margin-bottom: 20px;
}
.nows {
  font-size: 0px;
}

<div>
  <img src="https://via.placeholder.com/150x150">
  <img src="https://via.placeholder.com/150x150">
</div>
<div class="nows">
  <img src="https://via.placeholder.com/150x150">
  <img src="https://via.placeholder.com/150x150">
</div>

使用注释来减轻代码中的空白

div {
  background: orange;
  margin-bottom: 20px;
}

<div>
  <img src="https://via.placeholder.com/150x150">
  <img src="https://via.placeholder.com/150x150">
</div>
<div><!--
  --><img src="https://via.placeholder.com/150x150"><!--
  --><img src="https://via.placeholder.com/150x150"><!--
--></div>

Answer 4

body {
   margin:0px;
   padding:0px;
}

我在其他论坛上发布了相同的问题，并且有效。谢谢您的帮助。

如何调整图像以使图像旁边没有空白？

4 个答案: