在调整大小时/调整大小时，使缩放/响应图像固定在div的底部 [英] Make a scaling/responsive image stick to bottom of div on/during resize

问题描述

我有条横幅.那个横幅上是一幅图像.调整视口/浏览器宽度的大小时，图像将缩放为较小的尺寸以适合窗口.

I have a banner. In that banner is an image. When you resize the viewport/browsers width the image is scaled to a smaller size to fit the window.

请注意，当您调整浏览器的大小时，随着图像的缩小，它会朝着远离div底部的方向向上移动.

Notice how when you resize the browser, as the image gets smaller, it moves in an upward motion away from the bottom of the div.

我希望图像的底部始终固定在div的底部.不论大小.

I want the bottom of the image to stick to the bottom of the div always. Regardless of size.

在这里放置我的 JS FIDDLE

Heres my JS FIDDLE

HTML

<div class="wrapper">
 <center>
 <div class="imgWrapper">
    <img src="http://lorempixel.com/500/300/">
 </div>
 </center>
</div>

CSS

.wrapper {
  background:#777;
  width:100%;
  height:400px;
  display:block;
  }

.imgWrapper {
  width:100%;
  max-width:500px;
  display:inline-block;
  margin-top:100px;
  }

.imgWrapper img {
  width:100%;
  }

推荐答案

我希望图像的底部始终固定在div的底部.不论大小.

I want the bottom of the image to stick to the bottom of the div always. Regardless of size.

将position: relative添加到父元素，将position: absolute;添加到子元素(以及bottom和left值).

Add position: relative to the parent element and position: absolute; to the child element (along with bottom and left values).

演示

DEMO

这篇关于在调整大小时/调整大小时，使缩放/响应图像固定在div的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！