Задать вопрос
rishatss
@rishatss
Simple Developer ^)
html

Как подогнать PSD в HTML?

Добрый день господа.
Такая тут проблемка.
Никак не могу подогнать под браузер картинку.
Имею макет на PSD и пытаюсь верстать его в HTML + CSS.
На выходе получаю такую вещь что картинка очень большая для страницы. Как от этого избавиться?

Прикладываю:
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Test</title>
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<!-- LIVE RELOAD - Временный -->
<script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script>
<!-- **************************** -->
<body class="bg">
<div class="first-container">
  <div class="rect1"></div>
  <div class="why"><img src="images/why.png"></div>
  <div class="rect3">item3</div>
</div>
</body>
</html>

CSS
/* Главный бэк */
body.bg
{
	margin: 0;
	padding: 0;
	background: #eeeeee;
}
div.first-container
{
	display: flex;
	align-items:center;
}
div.rect1
{
  background-color: rgb(0, 0, 0);
  opacity: 0.;
  position: absolute;
  left: -3px;
  top: 238px;
  width: 2065px;
  height: 415px;
  z-index: 219;
}
div.why
{
  max-width: 100%;
  position: absolute;
  left: -47px;
  top: 238px;
  z-index: 218;
}

Пытаюсь реализовать баннер. С текстом внутри. (Верх и подвал уже написан.)
36112a448b7c42d09cf4fdcf71882922.jpg
Вот что получаю:
c126a7c4ef6540b89cc71e8d2a26aa16.jpg
  • Вопрос задан
  • 431 просмотр
Комментировать
Подписаться 1 Оценить Комментировать
Решения вопроса 1
@Allan11
Фронтенд
Мне кажется попроще как-нибудь так сделать этот черный overlay
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 4
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
я понятия не имею что тут происходит:
div.why
{
  
  background-size: cover;
  max-width: 2065px;
  height: auto;
  opacity: 0.5;
  position: absolute;
  right: 10px;
  left: -47px;
  top: 238px;
  width: 2065px;
  height: 415px;
  z-index: 220;
}

но проблема именно там
p.s. и залей вретску сюда, если хочешь чтоб точно сказали где проблемы jsfiddle.net
Ответ написан
4 комментария
4 комментария
zorro76
@zorro76
Это ужас ваша верстка, вы не умеете ее готовить.
Ответ написан
2 комментария
2 комментария
webinar
@webinar
Учим yii: https://youtu.be/-WRMlGHLgRg
если вы хотите картинку сделать максимум 100%, то не
div.why {max-width: 100%;}
а
div.why {width: 100%;}
div.why img {max-width: 100%;}

Но вряд ли это решит проблему. Картинку надо кинуть на background блока и задать background-size:cover;
при этом блоку c банером дать width:100%; и height:300px; например, а лучше height:30vh;
Ответ написан
Комментировать
Комментировать
@tommy_13
див же 2000px+ по ширине, вот и картинка тянется до такого размера
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Trainee - IT Support
move2usajobs.com LLC • Лос-Анджелес
от 2 000 до 4 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Devops для видео сервиса
26 апр. 2024, в 06:46
1500 руб./в час
Найти ошибку flutter_map
26 апр. 2024, в 05:31
1000 руб./за проект
Разработать электронику для весов с Wi-Fi
26 апр. 2024, в 01:22
1000 руб./в час
Ещё заказы