我想在浏览器中显示一个图像：
我不想使用JavaScript ;什么是最好/最具语义的HTML和CSS？
更新我被要求澄清语义：图像是内容; HTML中唯一的内容。
@GionaF的想法让我感到快乐（和非常简单）的解决方案：
<!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>
img {
max-width:100%;
max-height:100%;
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
答案 0 :(得分：19)
你 可以 以多种方式实现它，但我不能在不知道上下文的情况下“语义”（图像是页面的主要/唯一内容） ？它是在博客文章的中间吗？），所以我会选择div。
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; /* real image width */
position:absolute;
top:0; left:0; right:0; bottom:0;
margin:auto;
}
display:table; + display:table-cell; + vertical-align:middle; 支持：IE8 +，所有其他浏览器 - 使用IE7后备（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 */
}
background-size:contain; 支持：IE9 +，所有其他浏览器 - 包含供应商前缀（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;
}
小心IE8如何呈现height:auto;，可能无法保持比率。
编辑：我刚刚意识到你写了“ 没有 调整图像的宽高比”。如果你真的不想保持这个比例，那就更容易......但你真的是这个意思吗？
答案 1 :(得分：0)
除非您拥有容纳图像的容器的高度，否则您将无法完成此操作。为了使视口知道图像居中的位置，需要知道您正在使用的整个高度，而不是保持与图像相同的大小。如果被告知高度，或者如果有实际内容填满，高度将只会扩大。
要水平居中，您需要在图像周围设置一个容器，并为其设置“0，auto”边距。在容器内将图像宽度设置为100％（这将保持比例正确，因为高度将适当地缩放），并为容器提供基于百分比的宽度。
答案 2 :(得分：0)
您需要为图像或环绕div设置边距的设置宽度和高度：自动使图像居中。看看下面的代码如何为您服务。
#container {
width: 1000px;
height: 1000px;
}
#img {
background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}
<div id="container">
<div id="img">
</div>
将图片设为背景？ 然后将主体设置为100％。
body
{
background-image: url('background.jpg');
background-repeat: no-repeat; /* you know... don't repeat... */
background-position: center center; /*center the background */
background-attachment: fixed; /*don't scroll with content */
}
答案 3 :(得分：0)
我无法找到一个完美的解决方案（从我读过的内容来看，使用CSS和HTML无法做到你想做的事情）。但我找到了一个更接近你需要的解决方案。我再说一遍，这并不完美。所以这里（你实际上把你的图像作为div的背景）：
#mydiv {
width: 100%;
height: 100%;
position: relative;
background-image: url(photo.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: auto 98%, cover;
}
所以，这里的关键是background-size属性。它在这里做了什么：强制图像按比例（向上或向下）缩放到div /容器的宽度/高度的指定百分比（div的宽度和高度由视口指定）。对于大于视口的图像，此解决方案很好，但问题是较小的图像（按比例放大）。不幸的是，CSS的当前实现不允许为max-height指定max-width或background-image。如果您想详细了解此主题，请打开此网页：http://www.css3.info/preview/background-size/。
无论如何，JavaScript解决方案更好。希望它有所帮助。