垂直对齐具有响应高度的 div 内的图像 [英] Vertically align an image inside a div with responsive height

查看：27
本文介绍了垂直对齐具有响应高度的 div 内的图像的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下代码，它设置了一个容器，当浏览器重新调整大小(以保持方形纵横比)时，该容器的高度会随着宽度而变化.

HTML

<div class="dummy"></div><div class="img-container"><IMG在这里>

CSS

.responsive-container {位置:相对；宽度:100%；边框:1px纯黑色；}.假的 {填充顶部:100%；/* 强制 1:1 纵横比 */}.img-容器{位置:绝对；顶部:0；底部:0；左:0；右:0；}

如何垂直对齐容器内的 IMG?我所有的图片都有可变的高度，容器不能有固定的高度/行高，因为它是响应式的...请帮忙！

解决方案

这是一种在 父 内同时水平和垂直对齐内联元素的技术:

垂直对齐

1) 在这种方法中，我们创建了一个 inline-block(伪)元素作为 parent 的第一个(或最后一个)子元素em>，并将其 height 属性设置为 100% 以获取其 parent 的所有高度.

2) 另外，添加 vertical-align: middle 将 inline(-block) 元素保持在行间距的中间.因此，我们将该 CSS 声明添加到 first-child 和 我们的元素(图像)中.

3) 最后，为了去除inline(-block)元素之间的空白字符，我们可以设置父元素的字体大小 通过 font-size: 0; 归零.

注意:我使用了 Nicolas Gallagher 的 在顶部/底部填充或边距是相对于包含块的宽度.

例如:

.responsive-container {宽度:60%；填充顶部:60%；/* 1:1 高度与宽度相同 */填充顶部:100%；/* 宽度:高度 = 60:100 或 3:5 */填充顶部:45%；/* = 60% * 3/4 , 宽:高 = 4:3 */填充顶部:33.75%；/* = 60% * 9/16, 宽:高 = 16:9 */}

这是在线演示.注释掉底部的线条并调整面板大小以查看效果.

此外，我们可以将 padding 属性应用于 dummy 子项或 :before/:after 伪代码-element 以达到相同的结果.但是注意，在这种情况下，padding 上的百分比值是相对于 .responsive-container宽度> 本身.

<div class="dummy"></div>

.responsive-container { 宽度:60%;}.responsive-container .dummy {填充顶部:100%；/* 1:1 正方形 */填充顶部:75%；/* w:h = 4:3 */填充顶部:56.25%；/* w:h = 16:9 */}

演示 #1.
演示 #2 (使用 :after 伪元素)

添加内容

使用 padding-top 属性 在内容的顶部或底部，在容器内.

为了解决这个问题，我们用包装元素包装内容，使用 绝对定位，最后展开包装器(bu使用top、right、bottom 和 left 属性)来填充其父容器的整个空间，容器.

我们开始:

.responsive-container {宽度:60%；位置:相对；}.responsive-container .wrapper {位置:绝对；顶部:0；右:0；底部:0；左:0；}

这是在线演示.

<小时>

大家聚在一起

<div class="dummy"></div><div class="img-container"><img src="http://placehold.it/150x150" alt="">

.img-container {文字对齐:居中；/* 居中对齐行内元素 */字体:0/0 一个；/* 隐藏空格等字符 */}.img-容器:之前{内容: ' ';显示:内联块；垂直对齐:中间；高度:100%；}.img 容器 img {垂直对齐:中间；显示:内联块；}

这是工作演示.

显然，您可以避免使用 ::before 伪元素来实现浏览器兼容性，并创建一个元素作为 .img-container 的第一个子元素:

<div class="centerer"></div><img src="http://placehold.it/150x150" alt="">

.img-container .centerer {显示:内联块；垂直对齐:中间；高度:100%；}

更新演示.

使用max-* 属性

为了使图像在框内保持较低的宽度，您可以在图像上设置 max-height 和 max-width 属性:

.img-container img {垂直对齐:中间；显示:内联块；最大高度:100%；/* <-- 将最大高度设置为其父级的 100% */最大宽度:100%；/* <-- 将最大宽度设置为其父级的 100% */}

这是更新的演示.

I have the following code which sets up a container which has a height that changes with the width when the browser is re-sized (to maintain a square aspect ratio).

HTML

<div class="responsive-container">
    <div class="dummy"></div>
    <div class="img-container">
        <IMG HERE>
    </div>
</div>

CSS

.responsive-container {
    position: relative;
    width: 100%;
    border: 1px solid black;
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

How can I vertically align the IMG inside the container? All my images have variable heights and the container can't have a fixed height/line height because it's responsive... Please help!

解决方案

Here is a technique to align inline elements inside a parent, horizontally and vertically at the same time:

Vertical Alignment

1) In this approach, we create an inline-block (pseudo-)element as the first (or last) child of the parent, and set its height property to 100% to take all the height of its parent.

2) Also, adding vertical-align: middle keeps the inline(-block) elements at the middle of the line space. So, we add that CSS declaration to the first-child and our element (the image) both.

3) Finally, in order to remove the white space character between inline(-block) elements, we could set the font size of the parent to zero by font-size: 0;.

Note: I used Nicolas Gallagher's image replacement technique in the following.

What are the benefits?

  • The container (parent) can have dynamic dimensions.

  • There's no need to specify the dimensions of the image element explicitly.

  • We can easily use this approach to align a <div> element vertically as well; which may have a dynamic content (height and/or width). But note that you have to re-set the font-size property of the div to display the inside text. Online Demo.

<div class="container">
    <div id="element"> ... </div>
</div>


.container {
    height: 300px;
    text-align: center;  /* align the inline(-block) elements horizontally */
    font: 0/0 a;         /* remove the gap between inline(-block) elements */
}

.container:before {    /* create a full-height inline block pseudo=element */
    content: ' ';
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    height: 100%;
}

#element {
    display: inline-block;
    vertical-align: middle;  /* vertical alignment of the inline element */
    font: 16px/1 Arial sans-serif;        /* <-- reset the font property */
}

The output

Responsive Container

This section is not going to answer the question as the OP already knows how to create a responsive container. However, I'll explain how it works.

In order to make the height of a container element changes with its width (respecting the aspect ratio), we could use a percentage value for top/bottom padding property.

A percentage value on top/bottom padding or margins is relative to the width of the containing block.

For instance:

.responsive-container {
  width: 60%;

  padding-top: 60%;    /* 1:1 Height is the same as the width */
  padding-top: 100%;   /* width:height = 60:100 or 3:5        */
  padding-top: 45%;    /* = 60% * 3/4 , width:height =  4:3   */
  padding-top: 33.75%; /* = 60% * 9/16, width:height = 16:9   */
}

Here is the Online Demo. Comment out the lines from the bottom and resize the panel to see the effect.

Also, we could apply the padding property to a dummy child or :before/:after pseudo-element to achieve the same result. But note that in this case, the percentage value on padding is relative to the width of the .responsive-container itself.

<div class="responsive-container">
  <div class="dummy"></div>
</div>


.responsive-container { width: 60%; }

.responsive-container .dummy {
  padding-top: 100%;    /*  1:1 square */
  padding-top: 75%;     /*  w:h =  4:3 */
  padding-top: 56.25%;  /*  w:h = 16:9 */
}

Demo #1.
Demo #2 (Using :after pseudo-element)

Adding the content

Using padding-top property causes a huge space at the top or bottom of the content, inside the container.

In order to fix that, we have wrap the content by a wrapper element, remove that element from document normal flow by using absolute positioning, and finally expand the wrapper (bu using top, right, bottom and left properties) to fill the entire space of its parent, the container.

Here we go:

.responsive-container {
  width: 60%;
  position: relative;
}

.responsive-container .wrapper {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
}

Here is the Online Demo.

Getting all together

<div class="responsive-container">
  <div class="dummy"></div>

  <div class="img-container">
    <img src="http://placehold.it/150x150" alt="">
  </div>
</div>


.img-container {
  text-align:center; /* Align center inline elements */
  font: 0/0 a;       /* Hide the characters like spaces */
}

.img-container:before {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.img-container img {
  vertical-align: middle;
  display: inline-block;
}

Here is the WORKING DEMO.

Obviously, you could avoid using ::before pseudo-element for browser compatibility, and create an element as the first child of the .img-container:

<div class="img-container">
    <div class="centerer"></div>
    <img src="http://placehold.it/150x150" alt="">
</div>


.img-container .centerer {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

UPDATED DEMO.

Using max-* properties

In order to keep the image inside of the box in lower width, you could set max-height and max-width property on the image:

.img-container img {
    vertical-align: middle;
    display: inline-block;
    max-height: 100%;  /* <-- Set maximum height to 100% of its parent */
    max-width: 100%;   /* <-- Set maximum width to 100% of its parent */
}

Here is the UPDATED DEMO.

这篇关于垂直对齐具有响应高度的 div 内的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆