13

我有一张我想在浏览器中显示的图像：

  1. 如果图像小于浏览器视口，则图像水平和垂直居中。
  2. 如果图像大于视口，则在不调整图像纵横比的情况下，缩小图像以尽可能多地填充视口。同样，图像水平和垂直居中。

我不想使用 JavaScript；什么是最好/最语义化的 HTML 和 CSS 来做到这一点？

更新有人要求我澄清语义：图像是内容；HTML 中的唯一内容。

解决方案

@GionaF 的想法让我得到了一个快乐（而且非常简单）的解决方案：

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;
}
4

4 回答 4

20

您可以通过多种方式实现它，但我不能在不知道上下文的情况下成为“语义”（图像是页面的主要/唯一内容吗？它在博客文章的中间吗？），所以我会去div。

1. position:absolute;+margin:auto;

支持：跨浏览器

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;

支持: 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 */
}

演示

3.background-size:contain;

支持：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:contain;
}

演示

注意 IE8 的渲染方式height:auto;，可能不会保持比例。

编辑：我刚刚意识到你写的是“没有调整图像的纵横比”。如果你真的不想保持这个比例，那就更容易了……但你真的是那个意思吗？ 

于 2012-10-01T00:50:23.923 回答
0

除非您为容纳图像的容器设置了高度，否则您将无法完成此操作。为了让视口知道图像在哪里居中，它需要知道您正在使用的整个高度，而不是保持与图像相同的大小。只有在被告知或有实际内容填满时，高度才会扩大。

要水平居中，您需要在图像周围设置一个容器，并将其边距设置为“0，自动”。将容器内的图像宽度设置为 100%（这将保持比例正确，因为高度将随之适当缩放），并为容器提供基于百分比的宽度。

于 2012-09-30T21:58:28.443 回答
0

您需要为您的图像或环绕 div 设置一个宽度和高度作为边距：自动以使图像居中。看看下面的代码如何为您工作。

CSS

#container {
width: 1000px;
height: 1000px;
}

#img {
    background-color:#000;
width: 100px;
height: 100px;
margin: 0 auto;
}​

HTML

<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 */
}
于 2012-09-30T22:18:14.253 回答
0

我无法找到一个完美的解决方案（从我读过的内容来看，仅使用 CSS 和 HTML 是不可能做你想做的事的）。但我找到了更接近您需要的解决方案。我再说一遍，它并不完美。所以就这样（你实际上把你的图像作为 a 的背景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为. 如果您想了解更多关于此主题的信息，请打开此网页：http ://www.css3.info/preview/background-size/ 。max-widthbackground-image

无论如何，JavaScript 解决方案更好。希望能帮助到你。

于 2012-09-30T23:48:14.793 回答