Блок с img со свойствами как у background

225

23 апреля 2018, 23:24

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

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

Answer 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>

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

Answer 2

ваш вопрос скорее о 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>

Answer 3

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