垂直对齐div中的图像与响应高度 [英] Vertically align an image inside a div with responsive height
问题描述
我有以下代码,用于设置一个容器,当浏览器调整大小时,其高度随宽度而变化(保持正方形的宽高比)。
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%; / * force 1:1 aspect ratio * /
}
.img-container {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
}
如何在容器中垂直对齐IMG?所有我的图像都有可变的高度,容器不能有固定的高度/行高,因为它响应...请帮助!
以下是一种技术,可以同时水平和垂直对齐在父元素内的内联元素:
垂直对齐
1)在这种方法中,我们创建一个 inline-block
的第一个(或最后一个)子项,并将其 height
属性设置为 100%$ c $
2)此外,添加 vertical-align:middle
将行内(-block)元素保留在行空格的中间。因此,我们将CSS声明添加到第一个子和元素(图片)。
3)最后,为了删除 inline(-block)元素之间的空白字符,我们可以设置<
注意: 我在下面使用了Nicolas Gallagher的 百分比值
例如:
.responsive-container {
width:60%;
padding-top:60%; / * 1:1高度与宽度相同* /
padding-top:100%; / * width:height = 60:100或3:5 * /
padding-top:45%; / * = 60%* 3/4,width:height = 4:3 * /
padding-top:33.75%; / * = 60%* 9/16,width:height = 16:9 * /
}
以下是 在线演示 。
此外,我们可以应用 padding
属性到 dummy 子元素或:before
/ :after
相同的结果。但是注意在这种情况下, padding
的百分比值相对于<$ c $的宽度 c> .responsive-container 本身。
< div class =responsive-container>
< div class =dummy>< / div>
< / div>
.responsive-container {宽度: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 。
演示#2 (:之后
pseudo-element)
添加内容
使用 padding-top
属性会在顶部产生巨大的空间底部的内容,在容器内。
为了解决这个问题,我们用wrapper元素包装内容,从文档正常流程中使用绝对定位,最后展开包装器(bu使用 top
, right
, bottom
left
属性)来填充其父项容器的整个空间。
我们去:
.responsive-container {
width:60%;
position:relative;
}
.responsive-container .wrapper {
position:absolute;
top:0; right:0; bottom:0; left:0;
}
这里是 在线演示 。
整合
< div class =responsive-container>
< div class =dummy>< / div>
< div class =img-container>
< img src =http://placehold.it/150x150alt =>
< / div>
< / div>
.img-container {
text-align:center; / *对齐中心内联元素* /
font:0/0 a; / *隐藏空格之类的字符* /
}
.img-container:before {
content:'';
display:inline-block;
vertical-align:middle;
height:100%;
}
.img-container img {
vertical-align:middle;
display:inline-block;
}
这里是 WORKING DEMO
。显然,你可以避免使用 :: before
伪元素浏览器兼容性,并创建一个元素作为 .img-container
:
< div class =img-container>
< div class =centerer>< / div>
< img src =http://placehold.it/150x150alt =>
< / div>
.img-container。 centerer {
display:inline-block;
vertical-align:middle;
height:100%;
}
使用 max- * 为了保持图像在宽度较低的框中,您可以设置 max-height
和 max-width
属性: .img-container img {
vertical-align:middle;
display:inline-block;
max-height:100%; / * < - 将最大高度设置为其父级的100%* /
max-width: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%;
}
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屋!
max-height
和 max-width
属性: .img-container img {
vertical-align:middle;
display:inline-block;
max-height:100%; / * < - 将最大高度设置为其父级的100%* /
max-width: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 thefont-size
property of thediv
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%;
}
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屋!