HTML视口中的中心图片（不含JavaScript） [英] Center image in HTML viewport (without JavaScript)
问题描述
我有一个想要在浏览器中显示的图片：
- 如果图片小于浏览器视口
- 如果图像大于视口，则图像缩小以填充
作为视口的大部分而无需调整
图像的宽高比。 - If the image is smaller than the browser viewport, the image is centered horizotally and vertically.
- If the image is larger than the viewport, the image is scaled down to fill as much of the viewport as possible without adjusting the aspect ratio of the image. Again, the image is centered horizotally and vertically.
更新我被要求对语义进行澄清：图片是内容; HTML中的唯一内容。
解决方案
@GionaF想法让我快乐>非常简单）解决方案：
HTML
<！DOCTYPE html>
< head>
< title>< / title>
< LINK href =test2.css =stylesheettype =text / css>
< / head>
< body>
< div>
< img src =photo.jpgalt =photo/>
< / div>
< / body>
CSS
img {
max-width：100％;
max-height：100％;
position：absolute;
top：0; left：0; right：0; bottom：0;
margin：auto;
}
>可以 在许多方面实现它，但我不能是语义，而不知道上下文（是图像的主要/唯一的内容的页面？是在一个博客的中间
h2> 1。
position：absolute; + margin：auto; 支持：crossbrowser
HTML
< html>
< body>
< div id =container>
< img src =your-image.jpg>
< / div>
< / body>
< / html>
CSS
html，body，＃container {
height：100％;
}
#container {
width：100％;
position：relative;
}
#container> img {
width：100％;
max-width：400px; / *实像宽度* /
position：absolute;
top：0; left：0; right：0; bottom：0;
margin：auto;
}
2。 display：table; + display：table-cell; + vertical-align：middle; ：所有其他浏览器都支持IE7，支持 www.quirksmode.org/css/display.html#table\">资源1 ）（ 2 ）（ 3 ）
HTML
< html>
< body>
< div id =container>
< span> / *重要的是你使用一个span这里
不是一个div，或者IE7 fallback不工作* /
< img src =your-image.jpg>
< / span>
< / div>
< / body>
< / html>
CSS
html，body，＃container {
height：100％;
}
#container {
width：100％;
display：table;
* display：block; / * IE7 * /
}
#container> span {
display：table-cell;
* display：inline-block; / * IE7 * /
vertical-align：middle;
text-align：center;
}
#container> span> img {
width：100％;
max-width：400px; / *实像宽度* /
}
3。 background-size：contains;
支持：IE9 +，所有其他浏览器供应商字首（来源1 ）（ 2 ）
HTML
< html>
< body>
< div id =container>< / div>
< / body>
< / html>
CSS
html，body，＃container {
height：100％;
}
#container {
margin：0 auto;
max-width：400px; / * real image width * /
background：url（your-image.jpg）50％50％no-repeat;
background-size：contains;
}
请小心IE8呈现 height：auto; ，可能不会保留比率。
只是意识到你写了 而不 调整图像的宽高比。如果你真的不想保持比例，这更容易...但你真的是吗？
I have an image I'd like to show in a browser such that:
I do not want to use JavaScript; what's the best/most semantic HTML and CSS to do this?
Update I've been asked for clarification regarding semantics: the image is content; the only content within the HTML.
Solution
@GionaF ideas got me to a happy (and very simple) solution:
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="photo.jpg" alt="photo" />
</div>
</body>
CSS
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
解决方案 You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.
1. position:absolute; + margin:auto;
Support: crossbrowser
HTML
<html>
<body>
<div id="container">
<img src="your-image.jpg">
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
position:relative;
}
#container > img {
width:100%;
max-width:400px; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
2. display:table; + display:table-cell; + vertical-align:middle;
Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)
HTML
<html>
<body>
<div id="container">
<span> /* it's important that you use a span here
not a div, or the IE7 fallback won't work */
<img src="your-image.jpg">
</span>
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
display:table;
*display:block; /* IE7 */
}
#container > span {
display:table-cell;
*display:inline-block; /* IE7 */
vertical-align:middle;
text-align:center;
}
#container > span > img {
width:100%;
max-width:400px; /* real image width */
}
3. background-size:contain;
Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)
HTML
<html>
<body>
<div id="container"></div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
margin:0 auto;
max-width:400px; /* real image width */
background:url(your-image.jpg) 50% 50% no-repeat;
background-size:contain;
}
Be careful for how IE8 renders height:auto;, may not keep the ratio.
Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that?
这篇关于HTML视口中的中心图片（不含JavaScript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
HTML
< html>
< body>
< div id =container>
< span> / *重要的是你使用一个span这里
不是一个div，或者IE7 fallback不工作* /
< img src =your-image.jpg>
< / span>
< / div>
< / body>
< / html>
CSS
html，body，＃container {
height：100％;
}
#container {
width：100％;
display：table;
* display：block; / * IE7 * /
}
#container> span {
display：table-cell;
* display：inline-block; / * IE7 * /
vertical-align：middle;
text-align：center;
}
#container> span> img {
width：100％;
max-width：400px; / *实像宽度* /
}
3。 background-size：contains;
支持：IE9 +，所有其他浏览器供应商字首（来源1 ）（ 2 ）
HTML
< html>
< body>
< div id =container>< / div>
< / body>
< / html>
CSS
html，body，＃container {
height：100％;
}
#container {
margin：0 auto;
max-width：400px; / * real image width * /
background：url（your-image.jpg）50％50％no-repeat;
background-size：contains;
}
请小心IE8呈现 height：auto; ，可能不会保留比率。
只是意识到你写了 而不 调整图像的宽高比。如果你真的不想保持比例，这更容易...但你真的是吗？
I have an image I'd like to show in a browser such that:
I do not want to use JavaScript; what's the best/most semantic HTML and CSS to do this?
Update I've been asked for clarification regarding semantics: the image is content; the only content within the HTML.
Solution
@GionaF ideas got me to a happy (and very simple) solution:
HTML
<!DOCTYPE html>
<head>
<title></title>
<LINK href="test2.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<img src="photo.jpg" alt="photo" />
</div>
</body>
CSS
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
You can achieve it in many ways, but i can't be "semantic" without knowing the context (is the image the main/only content of the page? is it in the middle of a blog post?), so i'll go for a div.
1. position:absolute; + margin:auto;
Support: crossbrowser
HTML
<html>
<body>
<div id="container">
<img src="your-image.jpg">
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
position:relative;
}
#container > img {
width:100%;
max-width:400px; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
2. display:table; + display:table-cell; + vertical-align:middle;
Support: IE8+, all other browsers - with IE7 fallback (Source 1) (2) (3)
HTML
<html>
<body>
<div id="container">
<span> /* it's important that you use a span here
not a div, or the IE7 fallback won't work */
<img src="your-image.jpg">
</span>
</div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
width:100%;
display:table;
*display:block; /* IE7 */
}
#container > span {
display:table-cell;
*display:inline-block; /* IE7 */
vertical-align:middle;
text-align:center;
}
#container > span > img {
width:100%;
max-width:400px; /* real image width */
}
3. background-size:contain;
Support: IE9+, all other browsers - with vendor prefixes (Source 1) (2)
HTML
<html>
<body>
<div id="container"></div>
</body>
</html>
CSS
html,body,#container {
height:100%;
}
#container {
margin:0 auto;
max-width:400px; /* real image width */
background:url(your-image.jpg) 50% 50% no-repeat;
background-size:contain;
}
Be careful for how IE8 renders height:auto;, may not keep the ratio.
Edit: i just realized that you wrote "without adjusting the aspect ratio of the image". If you really don't want to keep the ratio, it's easier ... but do you really mean that?
这篇关于HTML视口中的中心图片（不含JavaScript）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
