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

【问题标题】：Stretch images to the edge of browser and automatically resize with browser's size将图像拉伸到浏览器边缘并根据浏览器的大小自动调整大小
【发布时间】：2018-03-20 00:57:57
【问题描述】：

我是 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%;
}

我不知道如何使图像到达浏览器边缘并自动调整大小。请建议我。太感谢了！

【问题讨论】：

标签： html css image responsive

【解决方案1】：

您不应该在图像中使用特定的宽度和高度，并在 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;
}

【讨论】：

感谢您的回复！但是由于原始图像的宽度和高度不同，如果我没有在 html 中指定，如何使它们具有相同的高度？以及如何最多只能连续显示 3 张图像，而不是连续显示所有 5 张图像？谢谢！
感谢您更新您的答案！它看起来仍然不像我正在寻找的东西，因为我想让图像具有响应性。抱歉，我应该早点以更好的方式表达我的问题。但我真的很感谢你的时间！我肯定从你的回答中学到了其他东西。

【解决方案2】：

你可以这样做：

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>

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

【讨论】：