Question

我是网络开发的新手。当我尝试在我的新网页上添加图像时，我遇到了一些问题。我想在页面顶部修复图像，我使用了12个单位列。但是当我运行网页时，图像后面会出现一些空白空间。帮我解决一下我希望在重新调整窗口大小时图像的宽度发生变化，高度保持不变。这是我的代码

    <html lang="en">
    <head>
        <title>MyHealth template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="bootstrap-3.2.0/dist/css/bootstrap.min.css" rel="stylesheet"     media="screen">
    </head>
    <body>
        <div class="row" id="header">
            <div class="col-xs-12">
                <img src="images/header.png">
            </div>
        </div>
    </body>
   </html>

Answer 1

使用适当尺寸的图片并使用class="img-responsive"

        <div class="row" id="header">
            <div class="col-xs-12">
                <img class="img-responsive" src="images/header.png" />
            </div>
        </div>

Answer 2

jsfiddle上的

Check the Link

<div class="row" id="header">
    <div class="col-xs-12">
        <img class="img-responsive" src="http://supportlanka.org/upload/75d21c49a621c4d63b65992fb1ac644c.jpg">
    </div>
</div>

工作正常

Answer 3

这是我的代码

<html lang="en">
    <head>
        <title>MyHealth template</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="bootstrap-3.2.0/dist/css/bootstrap.min.css" rel="stylesheet"     media="screen">
        <link href="styles.css" rel="stylesheet">
    </head>
    <body>
        <!--header-->
        <div class="row" id="header">
            <div class="col-xs-12">
                <img src="images/header.png" class="img-responsive header-img">
                <h1 class="header-head">My Health</h1>
            </div>
        </div>
    </body>
</html>

并且css文件包含

    .header-img
    {
        z-index:9;
        width:100%;
        height:70px;
        position:absolute;
     }
     .header-head
     {
        color:#fff;
        font-family:harabara;
        margin-left:30px;
        z-index:10;
        position:absolute;
     }

这很好用。但图像宽度大于浏览器窗口的宽度，如何设置宽度到浏览器窗口宽度？

使用bootstrap列在网页中添加图像

3 个答案: