Первая верстка, пожалуйста! Как расположить картинку посередине экрана?

Question

[Ольга Таран]

Всем привет. Подскажите, это я высоко прыгнуть собралась в первую свою верстку или действительно можно не с помощью адаптивной верстки расположить картинку посередине экрана. Например, как в backgroud-size: cover.. И вообще у меня вся структура здесь рушится при уменьшении экрана. Укажите на ошибки, будьте добры.

HTML куска:

<div id="about">
		<div class="about-img"><img src="https://pp.vk.me/c631220/v631220440/1079b/E9-te2yJ6cc.jpg" alt="Про нас"></div>
		<div class="about-text clearfix"><h2 class="title">Who we are</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dui massa, condimentum a nisl quis, tristique efficitur erat. Aenean ut suscipit urna. Donec efficitur tristique lobortis. Nullam eu efficitur lacus, et blandit tellus. Mauris viverra condimentum tellus vitae sollicitudin. Mauris quis mattis urna. Suspendisse auctor magna quis ipsum ultrices scelerisque. Vestibulum quis hendrerit enim. Aenean viverra aliquam ex, sed ornare risus porta in.</p>
		<p>Aenean ut suscipit urna. Donec efficitur tristique lobortis. Nullam eu efficitur lacus, et blandit tellus. Mauris viverra condimentum tellus vitae sollicitudin. Mauris quis mattis urna. Suspendisse auctor magna quis ipsum ultrices scelerisque. Vestibulum quis hendrerit enim. Aenean viverra aliquam ex, sed ornare risus porta in.</p>
		<button class="about-btn">Read More</button>
	</div>
</div>

Css куска:

#about {
	height: 623px;
	background-color: #ffc155;
}

.about-img {
	float: left;
	padding-right: 100px;
}

.about-text {
	padding: 100px;
	margin-right: 300px;
}

#about h2 {
	font: bold 26px/26px Open Sans;
	text-transform: uppercase;
	color: white;
}

#about p {
	font: 13px/13px Open Sans;
	color: white;
	line-height: 30px;
}

.about-btn {
	display: inline-block;
	background: #e7ad48;
	padding: 15px 25px;
	font: 13px/13px Open Sans;
	color: white;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	border: 1px solid #cb8d21;
	margin-top: 70px;
}

Фото того, что получается:



Фото макета:

Answer 1

[Илья Пирожок]

У вас у #about стоит фиксированная высота и она не дает раскрыться картинке на 100% ее высоты, в этом и проблема. Попробуйте убрать высоту блока #about. Еще не советую верстать с id.
Вот неплохая статья, советую ознакомится
Еще смотрите, на макете оба блока равны по ширине. Соответственно укажите им ширину по 50% и все будет ок.
Для адаптивности тут нужно уже использовать media запросы, макет этот не сложный, ну если вы конечно знакомы с media) Описать сложно но тут работы на 2 минуты)

.about-img {
  width: 50%;
  float: left;
  padding-right: 100px;
}

.about-text {
  width: 50%;
  padding: 100px;
  margin-right: 300px;
}

Comments

[Илья Пирожок]

habrahabr.ru/post/143452