1

Как сверстать блок у которого картинка будет заполнять всю его ширину или высоту также как background Стоит задача — именно картинкой тегом img. Вот то - что нужно получить:

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

Расположение элементов решается с помощью grid и flex - это сделано, а вот как с картинками, как их обрезать не используя backgraund?

3
  • 1
    в смысле за вас сделать надо что ли ?
    – user33274
    23 апр 2018 в 6:43
  • background-size background-position используй
    – Air
    23 апр 2018 в 6:46
  • нужно обойтись без backgraund, а конкретно тегом <img> c фоном сделать понятно как 23 апр 2018 в 6:50

3 ответа 3

1

html,
body {
  color: #333;
  font-size: 16px;
  line-height: 20px;
}

body {
  margin: 20px;
}

h1 {
  line-height: 1.2;
  margin-bottom: 35px;
  text-align: center;
}

h2 {
  text-align: center;
}

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

.image-grid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 auto 35px;
  max-width: 920px;
}

.svg-image-grid {
  clear: both;
  margin: 0 auto 35px;
  max-width: 920px;
  overflow: hidden;
  position: relative;
}


/** Screen readers only class from Bootstrap */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  clip-path: inset(50%);
  border: 0;
}


/** Actual code examples */


/** Background */

.image-bg {
  background-position: center center;
  background-size: cover;
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 5px;
  width: calc(25% - 10px);
}

.image-bg-placeholder {
  height: 100%;
  visibility: hidden;
  width: 100%;
}


/** Object-fit */

.image-fit {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 5px;
  position: relative;
  width: calc(25% - 10px);
}

.image-fit-placeholder {
  height: 100%;
  visibility: hidden;
  width: 100%;
}

.image-fit-img {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  object-position: center;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}


/** Absolute positioning */

.image {
  -webkit-flex: 0 0 auto;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
  margin: 5px;
  overflow: hidden;
  position: relative;
  width: calc(25% - 10px);
}

.image-placeholder {
  height: 100%;
  visibility: hidden;
  width: 100%;
}

.image-img {
  left: 50%;
  max-height: 150%;
  max-width: 177%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


/** SVG */

.image-svg {
  float: left;
  margin: 5px;
  padding-bottom: calc(25% - 10px);
  position: relative;
  width: calc(25% - 10px);
}

.image-svg svg {
  bottom: 0;
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
}


/** Responsive grid */

@media (max-width: 480px) {
  .image,
  .image-fit,
  .image-bg,
  .image-svg {
    width: calc(50% - 10px);
  }
  .image-svg {
    padding-bottom: calc(50% - 10px);
  }
}
<h2>Изображение как background</h2>

<div class="image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image as a background example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-bg" style="background-image:url(https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image as a background example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image as a background example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-bg" style="background-image:url(https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg)" target="_blank">
    <img class="image-bg-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-bg-img sr-only" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image as a background example" />
  </a>

</div>

<h2>Параметры object-fit</h2>

<div class="image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-fit" target="_blank">
    <img class="image-fit-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-fit-img" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image using object-fit example" />
  </a>

</div>

<h2>Изображение с абсолютным позиционированием</h2>

<div class="image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image" target="_blank">
    <img class="image-placeholder" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=" alt="" />
    <img class="image-img" src="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" alt="Cropped image using absolute positioning example" />
  </a>

</div>

<h2>Изображение внутри SVG</h2>

<div class="svg-image-grid">

  <a href="https://www.flickr.com/photos/teroauralinna/33704491300" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm3.staticflickr.com/2809/33704491300_1df01dd919_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/33704488370" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm3.staticflickr.com/2848/33704488370_9572b9d270_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088934825" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm4.staticflickr.com/3947/34088934825_0acfe80a04_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

  <a href="https://www.flickr.com/photos/teroauralinna/34088930595" class="image-svg" target="_blank">
    <svg viewBox="0 0 1 1" role="img">
      <title>Cropped image using SVG example</title>
      <image xlink:href="https://farm4.staticflickr.com/3956/34088930595_2b84cec168_z_d.jpg" width="100%" height="100%" preserveAspectRatio="xMidYMid slice" />
    </svg>
  </a>

</div>

Подробности читайте тут. Код в примере взят оттуда.

0

ваш вопрос скорее о aspect-ratio у фото ... смотрите я попытался так реализовать , три варианта

смотреть на весь экран: так как задачи адаптировать не было

img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.wrapper1 .items1 {
  display: flex;
  align-items: center;
  width: 70%;
  margin: 50px auto;
}

.wrapper1 .items1 .item-img {
  width: 50%;
}

.wrapper1 .items2 {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 50px auto;
}

.wrapper1 .items2 .item-img {
  order: 1;
}

.wrapper1 .items2 .item-img img {
  height: 40vh;
  object-fit: cover;
}

.wrapper1 .items2 .item-text {
  order: 2;
}

.wrapper1 .items3 {
  display: flex;
  flex-direction: row;
  width: 70%;
  margin: 50px auto;
  align-items: center;
}

.wrapper1 .items3 .item-img {
  width: 60%;
  height: 100%;
  overflow: hidden;
}

.wrapper1 .items3 .item-img img {
  width: 300px;
  margin-left: -100px;
}

.item-text {
  padding: 0 10px;
}
<div class="wrapper1">
  <div class="items items1">
    <div class="item-text">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic laborum laboriosam eius recusandae et, numquam dolorem reprehenderit unde illum pariatur.</p>
    </div>
    <div class="item-img">
      <img src="http://push-foto.ru/wp-content/uploads/2017/11/Girl-in-summer-relaxation-nature-grass_1920x1200.jpg" alt="">
    </div>
  </div>

  <div class="items items2">
    <div class="item-text">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic laborum laboriosam eius recusandae et, numquam dolorem reprehenderit unde illum pariatur.</p>
    </div>
    <div class="item-img">
      <img src="http://push-foto.ru/wp-content/uploads/2017/11/Girl-in-summer-relaxation-nature-grass_1920x1200.jpg" alt="">
    </div>
  </div>

  <div class="items items3">
    <div class="item-text">
      <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Hic laborum laboriosam eius recusandae et, numquam dolorem reprehenderit unde illum pariatur.</p>
    </div>
    <div class="item-img">
      <img src="http://push-foto.ru/wp-content/uploads/2017/11/Girl-in-summer-relaxation-nature-grass_1920x1200.jpg" alt="">
    </div>
  </div>
</div>

0

Примените к картинке <img> стиль object-fit:cover, если хотите заполнения картинкой без искажений (тогда будет обрезка), или object-fit:fill (без обрезки, но с искажением пропорций, если у картинки и контейнера они отличаются). Всё.

2

Ваш ответ

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

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