Изображение на всю высоту в правом блоке

154

08 июня 2019, 02:50

Помогите пожалуйста приклеить изображение в правый блок на всю высоту экрана, с нулевыми отступами, как на изображении. Возможно без использование bootstrap реализовать?

Answer 1

Примерно так ..

Я до конца не доделал, не стал наполнять до конца

В общем использовалась портретное изображение

смотреть на полный экран

* { 
  margin: 0; 
  padding: 0; 
  box-sizing: border-box; 
} 
 
html, 
body { 
  height: 100vh; 
  background: #4D515E; 
} 
 
img { 
  display: block; 
  width: 100%; 
} 
 
.items { 
  width: 768px; 
  margin: 30px auto; 
  display: flex; 
  border-radius: 6px; 
  overflow: hidden; 
} 
 
.item { 
  width: 100%; 
} 
 
.item:nth-of-type(1) { 
  background: #fff; 
  padding: 30px; 
} 
 
.item_centered { 
  width: 100%; 
  height: 100%; 
  background: inherit; 
  padding: 20px; 
} 
 
h2 { 
  padding: 10px 0; 
  text-transform: uppercase; 
} 
 
p { 
  font-variant: small-caps; 
} 
 
span { 
  font-size: 12px; 
  color: #ccc; 
}

<div class="items"> 
  <div class="item"> 
    <div class="item_centered"> 
      <p> 
        Lorem ipsum dolor. 
      </p> 
      <h2> 
        become a member 
      </h2> 
      <span> 
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto nesciunt neque accusamus! 
      </span> 
    </div> 
  </div> 
  <div class="item"> 
    <img src="https://resi.ze-robot.com/dl/ci/city-768%C3%971024.jpg" alt=""> 
  </div> 
</div>

Answer 2

Еще вариант

* { 
  box-sizing: border-box; 
} 
 
body { 
  background: #f7f7f7; 
} 
 
.box { 
  max-width: 600px; 
  margin: 1rem auto; 
} 
 
.box-inner { 
  width: 100%; 
  position: relative; 
  padding: 2rem calc(30% + 2rem) 2rem 2rem; 
  background: #fff; 
  border-radius: 10px; 
  box-shadow: 0 2px 7px rgba(0, 0, 0, .15); 
} 
 
.box-inner:after { 
  content: ''; 
  position: absolute; 
  top: 0; 
  right: 0; 
  width: 30%; 
  height: 100%; 
  background: url(https://images.unsplash.com/photo-1506964110246-f73975e2b20a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60) no-repeat center center; 
  background-size: cover; 
  border-radius: 0 10px 10px 0; 
}

<div class="box"> 
  <div class="box-inner"> 
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, enim accusantium hic quae alias iusto dolorum vel quia eum repellendus quidem ex non, facere, culpa illum aliquid temporibus, voluptate! Porro. 
    </p> 
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, enim accusantium hic quae alias iusto dolorum vel quia eum repellendus quidem ex non, facere, culpa illum aliquid temporibus, voluptate! Porro. 
    </p> 
  </div> 
</div>

Answer 3

если изображение написано в html через тэг img - даёте ему класс, в css width и height 100%. Изображение должно быть дочерним элементом блока. Покажите свой код, так будет понятнее.

Например есть обертка для двух блоков. Один див с контентом, другой с изображением.

обертке можете задать display: flex; Тогда элементы будут располагаться в линию. Высоту блоков можно регулировать так же высотой обертки, а блокам дать height: 100%.

Answer 4

Еще один вариант с absolute:

* { 
  box-sizing:border-box; 
} 
 
 
 
.box { 
  position: relative; 
  padding-right: 30%; 
  background: #fff; 
  border-radius: 10px; 
  overflow: hidden; 
} 
 
.box-body { 
  padding: 2rem; 
} 
 
.box-thumb { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  right: 0; 
  width: 30%; 
} 
 
.box-thumb>img { 
  width: 100%; 
  height: 100%; 
  object-fit:cover; 
}

<div class="box"> 
  <div class="box-body"> 
    <p> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, enim accusantium hic quae alias iusto dolorum vel quia eum repellendus quidem ex non, facere, culpa illum aliquid temporibus, voluptate! Porro. 
    </p> 
  </div> 
  <div class="box-thumb"> 
    <img src="https://images.unsplash.com/photo-1506964110246-f73975e2b20a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=600&q=60" alt=""> 
  </div> 
</div>