0

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

3
  • может height: 100%?
    – dasauser
    10 дек 2018 в 13:13
  • С какими свойствами следует обернуть блок с изображением чтобы оно отображалось по правому краю с 100% height? 10 дек 2018 в 13:19
  • пользуй flexbox'ы
    – dasauser
    10 дек 2018 в 13:22

4 ответа 4

1

Еще вариант

* {
  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>

0

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

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

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

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

* {
  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>

4
  • Спасибо за помощь, сейчас буду разбираться в вашем решении задачи. 10 дек 2018 в 14:32
  • @Кирилл если устроило - то палец вверх и отметь решением 10 дек 2018 в 14:36
  • Выложил не совсем корректный скрин макета, изображение исправил, а именно класс items должен быть на всю ширину экрана. Сейчас сижу пытаюсь изменить ваш код чтобы отображалось как на изображении. 10 дек 2018 в 20:00
  • @Кирилл это не сложно же - items это родитель для item которых два 10 дек 2018 в 23:00
0

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

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

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

0

Еще один вариант с 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>

Ваш ответ

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

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