1
В настоящее время я делаю свой личный сайт, и я борюсь, когда дело касается изображений и меньших экранов. Я в основном хочу разместить портретное изображение меня в середине экрана над текстом заголовка и заставить его оставаться там, используя меньший размер экрана. Я пробовал позицию: относительные и подобные решения, но я просто не могу заставить ее работать.Как сделать изображение подходящим и авторезистировать независимо от экрана?
Я в основном хочу расположить его над текстом заголовка и сделать его автоматически масштабируемым при использовании разных размеров экрана. Я также хочу, чтобы он имел фиксированную ширину и высоту.
Вот код:
<!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");
}
Посмотрите на это сообщение: http://stackoverflow.com/questions/26662031/how-do-i-make-images-fit-the-entire-screen-fully-regardless-of-screen-size –
@AlexeyGorozhanov Но я не хочу, чтобы он охватывал весь экран. – Hurtox
«Я в основном хочу расположить его над текстом заголовка и сделать его автоматически масштабируемым при использовании разных размеров экрана. Я также хочу, чтобы он имел фиксированную ширину и высоту». Если вы планируете автоматическую масштабирование, то высота и ширина изображения не будут одинаковыми. – EddNewGate