Задать вопрос
@mugiwara_l

Как сверстать изображение показанное на картинке?

Добрый день!
Подскажите, как правильно сверстать изображение (и аналогичные случаи в принципе) указанное стрелкой на картинке. Особенность, которая не видна на экране - это то, что эта картинка начинается не по середине экрана, а правее середины на 15px.
5a8c90bc7707d945528503.png

Уточню моменты, которые мне не понятны:
1. Делать через img или background.
2. Как реализовать выход из основного блока с контентом.
3. Как правильно организовать поведение картинки при изменении разрешений экрана.
4. И как учесть расположение начала картинки на 15 px правее центра.

Вот код, имитирующий ситуацию с тем, что я самостоятельно смог сделать:

<!DOCTYPE HTML>
<html>
 <head>
  <title>Изображение в край</title>
  <style type="text/css">
    .column {
      width: 1134px;
      height: 300px;
      border: 3px solid black;
      margin: 0 auto;
      font-size: 30px;
      text-align: center;
    }

    .your-design {
      min-width: 1140px;
      height: 560px;
      background-image: url("http://i.yapx.ru/9kWB.png");
      background-repeat: no-repeat;
      background-position: calc(50% + 621px) 0;
    }

    .text-design {
      width: 1140px;
      margin: 0 auto;
    } 

  </style>
 </head>
 <body> 
  <div class="column">Имитация основного блока с контентом</div>
  <div class="your-design">
  <div class="text-design">
    <p>Текст слева от картинки</p>
  </div>
</div>
 </body>
</html>
  • Вопрос задан
  • 1225 просмотров
Подписаться 1 Простой Комментировать
Пригласить эксперта
Ответы на вопрос 3
aloky
@aloky
js
postition: relative; right: 15px;
Ответ написан
Odisseya
@Odisseya
Оптимизирую PageSpeed & Performance
1. через img — это контентное изображение (особенно, если понадобится его править через админку).
2. флекс-бокс.
3. добавить , внутри которого тег с медиазапросом и атрибутом srcset с ретиновым вариантом.
4. calc(50% + 15px)

Форму изображению можно придать несколькими способами:
  • сразу сохранить с наложением фона: jpg/png
  • наложить верхним слоем svg-маску
Ответ написан
Комментировать
Amirez
@Amirez
В чем секрет кота Бориса?
Пробуй в этом русле. Источник

<div>
  <img src="http://www.imgworlds.com/wp-content/uploads/2015/12/generic.jpg" alt="">
</div>

div {
  width: 550px;
  height: 200px;
  background: #000;
  overflow: hidden;
  border-top-left-radius:80px;
  border-bottom-left-radius: 160px 250px
}

img {
  max-width: 100%;
  max-width: 100%;
}


Еще вариант
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы