Question

我目前正在制作我的个人网站，而且在涉及图像和小屏幕方面我很挣扎。我基本上想把我的肖像图像放在标题文本上方的屏幕中间，并在使用较小的屏幕尺寸时使其保持在那里。我已经尝试了位置：相对和类似的解决方案，但我无法让它工作。

我基本上想将它放在标题文本上方，并在使用不同的屏幕尺寸时自动缩放。我也希望它有一个固定的宽度和高度。

以下是代码：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Oskar Yildiz</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>    
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="main.css" 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

    <div id="wrapper">

    <div id="bg" class="background-div">
    </div>
    <div id="header" class="container">
        <div class="row">
            <div class="col-xs-12">
                <img class="img-circle" src="files/portraitcrop.jpg" />
                <h1 id="main-title" class="page-title">Oskar Yildiz</h1>
                <h2 class="page-description" style="font-style: normal;">
                Welcome
                </h2>
                <h2 class="page-description">
                Young tech enthusiant, web developer and content creator.

                </h2>

            </div>
        </div> 
    </div>

</div>


<script type="text/javascript">
$("#main-title").fadeIn();
</script>

CSS：

        body {
        margin: 0;
        padding: 0;
        font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
        font-weight: 300;
        /*background-image: url("./files/bg.jpg");*/
    }

    .background-div {
        background-image: url("./files/background.jpg");
        width: 100%;
        min-height: 100%;
        background-repeat: no-repeat;

        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover; 
        background-size: cover;


        position: fixed;
        top: 0;
        left: 0;
        display: table;
        background-position: center;

        -webkit-filter: blur(3px);
        -moz-filter: blur(3px);
        -o-filter: blur(3px);
        -ms-filter: blur(3px);
        filter: blur(3px);
    }

    #header {
        display: table;
        position: relative;
    }

    .page-title {
        text-align: center;
        text-transform: uppercase;
        color: white;
        margin-top: 330px;
        font-size: 2em;
        margin-bottom: 0px;
    }

    #header h2 {
        margin: 0;
    }

    .page-description {
        text-align: center;
        color: white;
        padding-top: 8px;
        font-style: italic;
        font-family: "Trebuchet MS", Helvetica, sans-serif;
        font-size: 150%;
    }

    .portrait { 
    }

    img {
        padding: 0;
        margin: 0;
        min-height: 30%;
        min-width: 30%;
    }

    .oskar {  
        width:100%;
        height:100%;
        background-size: cover;
        display: table;
        background: #222 no-repeat center center;
        background-color: #222;
        background-image: url("./files/bg.jpg");
    }

Answer 1

您可以在图片上使用img-responsive类。所以，例如

<img class="img-responsive" src="path to image" alt="image of me"/>

然而，在您提到的评论中，您不希望它从左到右占据整个屏幕，因此解决该问题的解决方案是使用已包含的网格系统。

假设您希望图片占据所有设备上50％的页面。你会使用这样的代码。

<div class="col-xs-6 col-xs-offset-3">
   <img class="img-responsive" src="path to image" alt="image of me"/>
</div>

这段代码的功能很简单，它使得超小（xs）设备上的div为6列。 6列是网格的一半，因为网格由12列组成，因此当使用6列时为50％。然后我们将偏移类添加到xs，将内容推到右边的3列，使图像居中，使得其他50％的页面在左边25％的间距中，25％在对。

使用我在这里所做的网格系统可以让你控制图像周围的间距，但是有一个固定的宽度和高度是不可能完成你想要的。

我希望这可以帮助您解决问题，如果您需要更多帮助，我会随时为您提供帮助。：）

无论屏幕大小如何，如何使图像适合和自动调整大小？

1 个答案: