无论屏幕尺寸如何，如何使图像适合并自动调整大小？答案

【问题标题】：How to make an image fit and autoresize no matter the screensize?无论屏幕尺寸如何，如何使图像适合并自动调整大小？
【发布时间】：2015-04-04 11:27:55
【问题描述】：

我目前正在制作我的个人网站，但在图像和小屏幕方面我遇到了困难。我基本上想将我的肖像图像放置在标题文本上方的屏幕中间，并在使用较小的屏幕尺寸时使其保持在那里。我已经尝试过 position: relative 和similar 解决方案，但我无法让它发挥作用。

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

代码如下：

<!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");
    }

【问题讨论】：

看这个帖子：stackoverflow.com/questions/26662031/…
@AlexeyGorozhanov 但我不希望它覆盖整个屏幕。
“我基本上想把它放在标题文本上方，让它在使用不同的屏幕尺寸时自动缩放。我还希望它有固定的宽度和高度。”如果要自动缩放，图像的高度和宽度不可能相同。
@EddNewGate 好的，我明白了。但我的意思是，无论屏幕大小如何，它都会保持在同一个位置，并且不会固定在一个位置。
如果您希望图像在用户调整屏幕大小时保持在中间，只需在图像代码上输入这两个：'margin-left:auto'和'margin-right:auto'。而且，要小心你给它的位置。这仅适用于位置：相对或静态（默认）

标签： html css twitter-bootstrap

【解决方案1】：

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

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

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

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

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

这段代码的作用很简单，它创建了一个在超小 (xs) 设备上为 6 列的 div。 6 列是网格的一半，因为网格由 12 列组成，因此当您使用 6 列时为 50%。然后我们将偏移类添加到 xs 中，将内容推送到右侧 3 列，使图像居中并使页面的其他 50% 位于左侧 25% 的间距中，25% 在左侧对。

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

我希望这可以帮助您解决问题，如果您需要更多帮助，我会在这里提供帮助。 :)

【讨论】：