无论屏幕大小如何制作图像和自动调整大小？

我目前正在制作我的个人网站，并且在涉及图像和较小的屏幕时我正在努力工作。我基本上想把我的肖像图像放在标题文本上方的屏幕中间，并在使用较小的屏幕尺寸时使它停留在那里。我已经尝试过职位：相对和类似的解决方案，但我不能让它工作。无论屏幕大小如何制作图像和自动调整大小？

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

下面的代码：

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

来源

2015-04-04 Hurtox

看看这篇文章：http://stackoverflow.com/questions/26662031/how-do-i-make-images-fit-the-entire-screen-fully-regardless-of-screen-size – 2015-04-04 11:32:25

@AlexeyGorozhanov但我不希望它覆盖整个屏幕。 – Hurtox 2015-04-04 11:35:16

“我基本上想把它放在标题文本上方，并在使用不同的屏幕尺寸时自动缩放，我也希望它具有固定的宽度和高度。”如果要自动缩放，则图像的高度和宽度不可能相同。 – EddNewGate 2015-04-04 11:43:55

您可以在图像上使用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>

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

如我在这里所做的那样使用网格系统可以让你控制图像的间距，但是固定的宽度和高度不可能达到你想要的。

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

来源

2015-04-10 05:15:07 Cwoelfle

无论屏幕大小如何制作图像和自动调整大小？

回答

相关问题