将flexbox中的图像缩放到可用宽度或高度 [英] Scale image in flexbox to available width OR height
问题描述
我想让网页上的图片增长/缩小到弹出框的高度或宽度，并保持原始的宽高比。
我使用 max-height：100％;
该页面始终填充浏览器窗口而不会溢出。它有3行：
- 顶部有固定高度的标题
- 图片和说明并排显示
- 底部有固定高度的页脚
这意味着大部分时间空白空间存在于左侧或者右侧。
这是一个示例页面：
; html>< head>
< title>标题< / title>
< style type =text / css>
* {font-size：100％; font：inherit; padding：0; border：0; margin：0}
body {background：#FFC;颜色：＃333; font-family：sans-serif}
body {display：flex; flex-direction：column; height：100％}
h1 {text-align：right; margin-right：20em;背景：#CAA}
article {flex：1; display：flex}
article figure {flex：1}
article figure img {display：block; max-width：100％; max-height：100％}
#description {width：20em;背景：#ACA}
footer {background：#AAC}
< / style>
< / head>< body>
< h1>标题< / h1>
< article>
< figure> < img src =https://placekitten.com/987/765/> < / figure>
< div id =description>
< p>说明。< / p>
< / div>
< / article>
< footer> Footer< / footer>
< / body>< / html>
我做了 JSFiddle ，但它不会将页脚固定在底部，就像在单独的浏览器窗口中查看一样。
使用flexbox是件很好的事情，因为它很容易布局。
我相信你错过了 height：100％可以从视口继承，
其余部分，只是flexbox插入问题， flex values overflow 和max-size重置:( 演示播放）
html，/ * viewport values for height / width％* / body {height：100％; margin：0;} * {box-sizing：border-box; margin：0; padding：0;} body {display：flex; flex-flow：column;} article {display：flex; / * also a flex child * / flex：1; overflow：hidden; / *我们将挤压里面的孩子* /}＃description {width：20em;} figure {flex：1;显示：flex; / *再次也是一个flex子* / overflow：hidden; / *我们将挤压孩子里面* /} img {margin：auto; / *会收缩到适合里面和坐在中间* / max- ：100％; max-width：100％;} h1 {margin：0;背景：#CAA} #description {background：#ACA} footer {background：#AAC}
< h1>标题< / h1>< article& < figure> < img src =https://placekitten.com/987/765/> < / figure> < div id =description> < p>说明。< / p> < / div>< / article>< footer> Footer< / footer>
注意：此处图片的增长不会超过其原始大小，它只会缩小。最小高度+最大高度100％是高度100％，宽度相同。
直到 object-fit 随处可见，后台 background-size 将是一个替代但是从内容中丢失图像。 p>
因此，通过CSS的棘手方式，仍然保持图像内容是：
- 将图片设置为背景图片，并使用包含background-size，
- 将图片自身缩小到零，只有在后台才会看到它。（这是为了保持其内容的一部分，并保持alt属性对屏幕阅读器和搜索引擎有效）
http://caniuse.com/#search=background-size （对于旧的IE，检查polyfills但flex涉及，所以我想你不介意那么多）
html，/ *视口值的高度/宽度％* / body {height：100 ％; margin：0;} * {box-sizing：border-box; margin：0; padding：0;} body {display：flex; flex-flow：column;} article {display：flex; / * also a flex child * / flex：1; overflow：hidden; / *我们将挤压里面的孩子* /}＃description {width：20em;} figure {flex：1;显示：flex; / *再次也是一个flex子* / overflow：hidden; / *我们将挤压孩子里面* / background：url（https://placekitten.com/987/765）center no-repeat; background; size：contains;} img {/ *隐藏它并显示为背景* / height：0;} h1 {margin：0;背景：#CAA} #description {background：#ACA; display：flex;} p {margin：auto 1em; } br：last-of-type {margin-bottom：1em; line-height：2em;} footer {background：#AAC}< h1>标题< / h1>< article& < figure> < img src =https://plcekitten.com/987/765alt =kitty to pet/><！ - 断开链接以显示alt属性，该图像仍然是内容的一部分 - > < / figure> < div id =description> < p>隐藏图片并将其放入图形的背景中，< br /> < br />指向图片的链接，目的是显示alt是这里的内容< / p> < / div>< / article>< footer> Footer< / footer>
I want an image on a webpage to grow/shrink to the available height or width of a flexbox and keep the original aspect ratio.
I have used max-height:100%; max-width:100% on the image but that doesn't work.
The page always fills the browser window without overflow. It has 3 rows:
- a title at the top with fixed height
- an article, with image and description side by side
- a footer at the bottom with fixed height
The image should grow/shrink with the available height or width, depending on the aspect ratio of the image and surrounding box.
This means most of the times empty space is present left or under the image.
This is a example page:
<html><head>
<title>Title</title>
<style type="text/css">
* {font-size:100%; font:inherit; padding:0; border:0; margin:0}
body {background:#FFC; color:#333; font-family:sans-serif}
body {display:flex; flex-direction:column; height:100%}
h1 {text-align:right; margin-right:20em; background:#CAA}
article {flex:1; display:flex}
article figure {flex:1}
article figure img {display:block; max-width:100%; max-height:100%}
#description {width:20em; background:#ACA}
footer {background:#AAC}
</style>
</head><body>
<h1>Title</h1>
<article>
<figure> <img src="https://placekitten.com/987/765" /> </figure>
<div id="description">
<p>The description.</p>
</div>
</article>
<footer> Footer </footer>
</body></html>
I made a JSFiddle, but it does not place the footer fixed at the bottom as it does when viewed in a separate browser window.
It would be nice to use flexbox as it's promoted for it's easy layout. But if this cannot be done with it I'll use absolute positioning.
i believe you missed to make height:100% be inherited from viewport ,
for the rest, it is just a matter of flexbox inbrication , flex values overflow and max-size to be reset:( demo to play with )
html,/* viewport values for height/width % */
body {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
}
article {
display: flex;/* also a flex child */
flex: 1;
overflow: hidden;/* we'll squeeze children inside */
}
#description {
width: 20em;
}
figure {
flex: 1;
display: flex;/* again also a flex child */
overflow: hidden;/* we'll squeeze children inside */
}
img {
margin: auto;/* will shrink to fit inside and sit in middle */
max-height: 100%;
max-width: 100%;
}
h1 {
margin: 0;
background: #CAA
}
#description {
background: #ACA
}
footer {
background: #AAC
}
<h1>Title</h1>
<article>
<figure>
<img src="https://placekitten.com/987/765" />
</figure>
<div id="description">
<p>The description.</p>
</div>
</article>
<footer>Footer</footer>
note: here image won't grow more than its original size, it will only scale down . min-height + max-height 100% is height 100%, idem for width.
until object-fit comes avalaible everywhere the fallback background-size will be an alternative but loosing image from content.
So the tricky way via CSS only and still keeping image into the content is :
- to set the image as a background to figure and use contain for background-size,
- to reduce width to image itself down to zero to only see it painted in the background.(this is to keep it part of the content and keep the alt attribute efficient for screen readers and search engines )
http://caniuse.com/#search=background-size (for older IE, check polyfills but flex is involved so i guess you did not mind those so much )
html,/* viewport values for height/width % */
body {
height: 100%;
margin: 0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
display: flex;
flex-flow: column;
}
article {
display: flex;/* also a flex child */
flex: 1;
overflow: hidden;/* we'll squeeze children inside */
}
#description {
width: 20em;
}
figure {
flex: 1;
display: flex;/* again also a flex child */
overflow: hidden;/* we'll squeeze children inside */
background:url(https://placekitten.com/987/765) center no-repeat;
background-size:contain;
}
img {/* hide it and show as a background */
height:0;
}
h1 {
margin: 0;
background: #CAA
}
#description {
background: #ACA;
display:flex;
}
p {
margin:auto 1em;
}
br:last-of-type {margin-bottom:1em;line-height:2em;}
footer {
background: #AAC
}
<h1>Title</h1>
<article>
<figure>
<img src="https://plcekitten.com/987/765" alt="kitty to pet" /><!-- broken link to show the alt attribute and that image is still part of content -->
</figure>
<div id="description">
<p>Hide image and place it into figure's background,<br/> So it scales without any distorsion.<br/>Link to image broken on purpose to show that alt is here to be the content </p>
</div>
</article>
<footer>Footer</footer>
这篇关于将flexbox中的图像缩放到可用宽度或高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
