2

Как сделать такой блок адаптивным, размер блока с текстом оставался прежним, а блок с изображением обрезался. (Фото 2) Block

введите сюда описание изображения

.block {
  border: 1px solid red;
  padding: 20px;
  margin: 200px 50px 0;
}
.block__img-wrap {
  margin-top: -150px;
  float: right;
}
<div class="block">
    <div class="block__img-wrap">
    <img src="https://www.nature.com/news/2017/170628/thumbs/homepage546585a-i1.0.jpg" alt="">
  </div>
  <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sunt non saepe dolores, modi maxime eum est laborum. Doloremque laudantium unde aliquam expedita quibusdam mollitia impedit doloribus eaque labore atque.
  </p>
</div>

3
  • Какой такой? Что именно не получается?
    – Air
    4 апр 2018 в 11:24
  • 1
    Картинку посадите на background с cover кажется, и будет вам счастье
    – DaemonHK
    4 апр 2018 в 11:34
  • @air, не получается правильно разместить изображение. Что бы при уменьшении размеров окна картинка обрезалась.
    – E_K
    4 апр 2018 в 17:54

2 ответа 2

2

Лучше использовать фоновое изображение

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans";
}

.block {
  height: 100vh;
  background: #F9FDFF;
  display: flex;
  align-items: center;
  background: url("http://www.fastservice-ptz.ru/resources/i6787-image-original-a6e78c.png") no-repeat 60vw center;
  background-size:100%;
}

.text {
  flex-basis:350px;
  padding: 40px;
}
.text h1 {
  color: #2C3D4D;
}
.text p {
  font-weight: bold;
  color: #2C3D4D;
}
<div class="block">
   <div class="text">
      <h1>Title</h1>
      <p>
         Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quisquam, nostrum pariatur! Est quisquam dicta at temporibus ut numquam fugiat, nisi cum placeat voluptas? Quasi, commodi facere illum excepturi mollitia corporis.
      </p>
   </div>

</div>

2
  • Расматривал вариант фона, но проблема в том, что на макете картинка выходит за пределы родительского блока.
    – E_K
    5 апр 2018 в 22:48
  • Сделать отдельный блок для цвета или использовать градиент
    – user245150
    6 апр 2018 в 10:24
0

.block {
	position: relative;
	border: 1px solid red;
	padding: 20px;
	margin: 200px 50px 0;
	overflow: hidden;
}
.block p {
	width: 200px;
}
.block__img-wrap {
	position: absolute;
	margin-top: -150px;
	float: right;
	left: 900px;
}
<div class="block">
		<p>
	      Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum sunt non saepe dolores, modi         maxime eum est laborum. Doloremque laudantium unde aliquam expedita quibusdam mollitia impedit           doloribus eaque labore atque.
	  </p>
	  <div class="block__img-wrap">
	   <img src="https://www.nature.com/news/2017/170628/thumbs/homepage546585a-i1.0.jpg" alt="">
	 </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.