html - 如何让 <img> 填充宽度设置为 : 100%; 的整个 <div>

标签 html css image

StackOverflow 社区。

我想要一张图片填满整个框,框的宽度为 100%,高度为 450 像素。

<div class="homepics">
  <img src="./homepic.jpg" alt="Home Picture" />
</div>

.homepics {
    width: 100%;
    height: 450px;
}

我尽力找到答案,但在我看到的示例中,框始终具有确定的宽度和高度,这不适用于我的情况。或者,如果我知道如何使框占据查看者浏览器宽度的 100%,而不必在宽度属性上使用 100% 值,它也许可以。

那么,如果我想让 homepic.jpg 适合我的 .homepics div,我该怎么做?

我将不胜感激。

最佳答案

您可以将其用作背景图像,以便容器可以根据屏幕大小进行调整。不幸的是,如果图像的大小比例截然不同,它确实会裁掉部分图像。

下面示例中使用的图像是 350x150,但它被拉伸(stretch)以填充 450 像素高的容器。

请注意,与容器相比图像越小,它看起来就越模糊。对于 100% 屏幕宽度的背景,您需要大约 1440 像素到 1920 像素宽的高清图像。

.bg-container{
  width:100%;
  height:450px;
  background-image:url('http://via.placeholder.com/350x150');
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
<div class="bg-container">
</div><!-- bg-container -->

关于html - 如何让 <img> 填充宽度设置为 : 100%; 的整个 <div>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47761667/

相关文章:

css - 我需要一个 div 坐在另一个 div 的 Angular 落,在另一个 div 之上

Java后端和JavaScript前端,如何加入?

javascript - 如何使用fabric js一一选择 Canvas 上的所有对象?

html - 如何在选择下拉列表项时更改图像

html - 使用 srcset 时如何强制加载低分辨率图像

javascript - 使用单选按钮跳到 div

javascript - 升级 EaselJS 后自定义光标不工作

jquery - 如何使用 modernizr.js 启用和禁用两个 jquery

html - 使用 CSS 强制 img 和 p 拆分为两列

html - 设置大小/长宽比的图像,这也是响应式的