HTML

    <head>
        <link rel="stylesheet" type="text/css" href="css/css_reset.css" />
        <link rel="stylesheet" type="text/css" href="css/mystyles.css" />
    </head>

    <body>
        <img src="images/final2.gif" class="stretch" alt="" />
        <p>This is the first paragraph in the body of your new HTML file!</p>
            asdfas
    </body>

CSS

body {
    /*width: 100%; 
    height: 100%; 
    position: fixed; 
    left: 0px; 
    top: 0px; */
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */

    background-color:black;
}

.stretch {
    /*width:100%;
    height:100%;*/
    z-index:-1;
    position:fixed;
    margin-left:auto;
    margin-right:auto;
}

CSS重置

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

Answer 1

嗯..

使用此css

.stretch {

    z-index:-1;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

查看此演示。http://jsfiddle.net/hzZXV/1/

Answer 2

用div包裹图像并将其宽度设置为图像宽度并以margin: 0 auto;

为中心

例如：

<div id="wrapper">
      <img src="http://www.w3schools.com/images/icon_book.gif" class="stretch" alt="" />
</div>

的CSS

#wrapper {
   width:  image-width;
   margin: 0 auto;
}

jsFiddle

Answer 3

在课堂上拉伸50％：

.stretch{
/*width:100%;
height:100%;*/
z-index:-1;
position:fixed;
left: 50%;
top: 0;
margin-left:auto;
margin-right:auto;
}

Answer 4

您无法将position: fixed;与margin: 0 auto;一起使用，因此您必须使用position: absolute;居中的方式。这是做到这一点的方法：

.stretch {
    position: fixed;
    left: 50%;
    margin-left: - img-width/2;
}

这是一个小提琴：

http://jsfiddle.net/Hive7/FAFTW/

图像不会与中心对齐

HTML

CSS

CSS重置

4 个答案: