将图像拉伸到浏览器的边缘，并根据浏览器的大小自动调整大小

Question

我是HTML和CSS的新手，我搜索了类似的问题，但找不到符合我情况的问题。我正在制作我的投资组合页面，并希望显示像这个网站的缩略图/图像：http://knockinc.com/work/

图像之间没有间隙，它们被拉伸到浏览器的边缘。图像也会根据浏览器的大小按比例调整大小。

这是我到目前为止的一个例子：https://codepen.io/jennycysun/pen/BwrWzb?editors=1100我想连续最多有3张图片。 （我只允许在这里发布CSS代码，因此对于HTML和CSS代码，请访问上面的codepen链接。）

body{
margin: 0;
padding: 0;
}

.puppies ul{
list-style-type:none;
padding: 0;
margin-top: 50px;
}

.puppies li{
display: inline-block;
postition: absolute;
left: 0;
right: 0;
margin: -2px;
margin-top: -4px; 
}

img{
max-width: 100%;
}

我无法弄清楚如何使图像到达浏览器的边缘并自动调整大小。请建议我。非常感谢！

Answer 1

你可以这样做：

body {margin: 0}

.puppies {
  column-count: 3; /* three images in a row */
  column-gap: 0; /* adjust if you want gaps between images */
  page-break-inside: avoid;
  break-inside: avoid-column;
}

.puppies > img {
  display: block; /* removes bottom margin/whitespace */
  width: 100%; /* responsiveness */
}

@media (max-width: 768px) {
  .puppies {column-count: 2} /* two images in a row */
}

@media (max-width: 480px) {
  .puppies {column-count: 1} /* one image in a row */
}

<div class="puppies">
  <img src="https://i.ytimg.com/vi/b9lb-T9FrAg/maxresdefault.jpg" alt="">
  <img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" alt="">
  <img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg" alt="">
  <img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg" alt="">
  <img src="http://tailandfur.com/wp-content/uploads/2016/10/40-Amazing-Poodle-Dog-Puppy-Pictures-2.jpg" alt="">
</div>

我建议你总是使用相同宽度和高度的图像，但这取决于你，而不是强制性的。您可以根据需要调整媒体查询屏幕宽度，但我现在使用的那些很常见。如果您需要任何其他帮助，请告诉我们。

Answer 2

您不应该在图像中使用特定的宽度和高度，并在css代码中添加百分比，如下所示

CSS

.puppies li{
  display: inline-block;
  postition: absolute;
  left: 0;
  right: 0;
  margin: -2px;
  margin-top: -4px; 
width:20%/*Just add this line*/
}

HTML

<div class=puppies>
<ul>
  <li><img src="https://i.ytimg.com/vi/b9lb-T9FrAg/maxresdefault.jpg"></li>
  <li><img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" ></li>
  <li><img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg"></li>
  <li><img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg"></li>
  <li><img src="http://tailandfur.com/wp-content/uploads/2016/10/40-Amazing-Poodle-Dog-Puppy-Pictures-2.jpg"></li>

编辑试试这个css代码

.puppies li{
  display: inline-block;
  postition: absolute;
  left: 0;
  right: 0;
  margin: -2px;
  margin-top: -4px; 
  width:33.33%;
  max-height: 300px;
  overflow: hidden;
  vertical-align: top;
}