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

Posted 2023-03-06

【中文标题】将图像拉伸到浏览器边缘并根据浏览器的大小自动调整大小

【英文标题】：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%;

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

【参考方案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" >
  <img src="https://cdn.thinglink.me/api/image/703615529729916929/1240/10/scaletowidth" >
  <img src="https://cdn.akc.org/Marketplace/Breeds/Siberian_Husky_SERP.jpg" >
  <img src="http://i.huffpost.com/gen/2709324/images/o-BULLDOG-PUPPY-facebook.jpg" >
  <img src="http://tailandfur.com/wp-content/uploads/2016/10/40-Amazing-Poodle-Dog-Puppy-Pictures-2.jpg" >
</div>

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