[html] background-size와 같은 것이 있습니까? 이미지 요소에 대해 포함하고 포함합니까?

Html / 글쓴이

페이지가 많고 배경 그림이 다른 사이트가 있으며 CSS에서 다음과 같이 표시합니다.

body.page-8 {
    background: url("../img/pic.jpg") no-repeat scroll center top #000;
    background-size: cover;
}

그러나 <img>요소를 사용하여 한 페이지에 다른 (전체 화면) 그림을 표시 하고 위의 background-image: cover;속성 과 동일한 속성을 갖기를 원합니다 (CSS에서 이미지를 표시 할 수 없으며 HTML 문서에서 이미지를 표시해야 함).

일반적으로 사용합니다 :

div.mydiv img {
    width: 100%;
}

또는:

div.mydiv img {
    width: auto;
}

사진을 전체적이고 반응 적으로 만듭니다. 그러나 width: 100%화면이 너무 좁아지면 사진이 너무 많이 줄어들고 ( ) 하단 화면에 신체의 배경색이 표시됩니다. 다른 방법 width: auto;은 이미지를 전체 크기로만 만들고 화면 크기에 응답하지 않습니다.

이미지를 표시하는 것과 같은 방법으로 이미지를 표시 할 background-size: cover수 있습니까?

답변

솔루션 # 1- 객체 맞춤 속성 ( IE 부족 지원 )

object-fit: cover;img에 설정 하십시오.

body {
  margin: 0;
}
img {
  display: block;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}
<img src="http://lorempixel.com/1500/1000" />

스 니펫 확장

참조 MDN을 -에 관한 object-fit: cover:

대체 된 컨텐츠는 요소의 전체 컨텐츠 상자를 채우면서 종횡비를 유지하도록 크기가 조정됩니다. 객체의 종횡비가 상자의 종횡비와 일치하지 않으면 객체가 맞게 잘립니다.

또한 이미지에 적용된 것과 배경 이미지에 적용된 것을 비교하는 이 Codepen 데모 를 참조하십시오object-fit: coverbackground-size: cover

해결 방법 # 2-img를 CSS가있는 배경 이미지로 교체

body {
  margin: 0;
}
img {
  position: fixed;
  width: 0;
  height: 0;
  padding: 50vh 50vw;
  background: url(http://lorempixel.com/1500/1000/city/Dummy-Text) no-repeat;
  background-size: cover;
}
<img src="http://placehold.it/1500x1000" />

스 니펫 확장

답변

실제로 IE8에서도 작동하는 매우 간단한 CSS 솔루션 이 있습니다.

.container {
  position: relative;
  overflow: hidden;
  /* Width and height can be anything. */
  width: 50vw;
  height: 50vh;
}

img {
  position: absolute;
  /* Position the image in the middle of its container. */
  top: -9999px;
  right: -9999px;
  bottom: -9999px;
  left: -9999px;
  margin: auto;
  /* The following values determine the exact image behaviour. */
  /* You can simulate background-size: cover/contain/etc.
     by changing between min/max/standard width/height values.
     These values simulate background-size: cover
  */
  min-width: 100%;
  min-height: 100%;
}
<div class="container">
    <img src="http://placehold.it/200x200" alt="" />
</div>

스 니펫 확장

답변

채우려는 컨테이너 요소를 가질 수 있다고 가정하면 이것이 작동하는 것처럼 보이지만 약간의 해킹을 느낍니다. 본질적으로, 나는 min/max-width/height더 큰 영역에서 사용하고 그 영역을 원래 크기로 다시 스케일링합니다.

.container {
  width: 800px;
  height: 300px;
  border: 1px solid black;
  overflow:hidden;
  position:relative;
}
.container.contain img {
  position: absolute;
  left:-10000%; right: -10000%;
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  max-width: 10%;
  max-height: 10%;
  -webkit-transform:scale(10);
  transform: scale(10);
}
.container.cover img {
  position: absolute;
  left:-10000%; right: -10000%;
  top: -10000%; bottom: -10000%;
  margin: auto auto;
  min-width: 1000%;
  min-height: 1000%;
  -webkit-transform:scale(0.1);
  transform: scale(0.1);
}
<h1>contain</h1>
  <div class="container contain">
    <img
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
       />
    <!-- 366x200 -->
  </div>
  <h1>cover</h1>
  <div class="container cover">
    <img
       src="https://www.google.de/logos/doodles/2014/european-parliament-election-2014-day-4-5483168891142144-hp.jpg"
       />
    <!-- 366x200 -->
  </div>

스 니펫 확장

답변

커버와 포함을 에뮬레이트하는 간단한 솔루션을 찾았습니다. 순수한 CSS이며 동적 크기의 컨테이너에서 작동하며 이미지 비율을 제한하지 않습니다.

IE 또는 16 이전의 Edge를 지원할 필요가 없으면 객체 맞춤을 사용하는 것이 좋습니다.

배경 크기 : 덮개

.img-container {
  position: relative;
  overflow: hidden;
}

.background-image {
  position: absolute;
  min-width: 1000%;
  min-height: 1000%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(0.1);
  z-index: -1;
}
<div class="img-container">
  <img class="background-image" src="https://picsum.photos/1024/768/?random">
  <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </p>
</div>

스 니펫 확장

이미지의 자연 크기가 표시되는 크기보다 큰 경우 1000 %가 사용됩니다. 예를 들어 이미지가 500×500이지만 컨테이너가 200×200 인 경우입니다. 이 솔루션을 사용하면 이미지가 최소 너비 / 최소 높이로 인해 2000×2000으로 크기가 조정 된 다음 200×200으로 축소됩니다 (으로 인해 transform: scale(0.1)).

x10 요소는 x100 또는 x1000으로 대체 될 수 있지만 일반적으로 20×20 div에서 2000×2000 이미지를 렌더링하는 것은 바람직하지 않습니다. 🙂

배경 크기 : 포함

동일한 원칙에 따라이 규칙을 사용하여 에뮬레이션 할 수도 있습니다 background-size: contain. 

.img-container {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.background-image {
  position: absolute;
  max-width: 10%;
  max-height: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%) scale(10);
  z-index: -1;
}
<div style="background-color: black">
  <div class="img-container">
    <img class="background-image" src="https://picsum.photos/1024/768/?random">
    <p style="padding: 20px; color: white; text-shadow: 0 0 10px black">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </div>
</div>

스 니펫 확장

답변

아니 , 당신은 그것을 꽤 좋아할 수는 background-size:cover 없지만 ..

이 접근 방식은 아주 가깝습니다. JavaScript를 사용하여 이미지가 가로 또는 세로인지 확인하고 스타일을 적절하게 적용합니다.

JS

 $('.myImages img').load(function(){
        var height = $(this).height();
        var width = $(this).width();
        console.log('widthandheight:',width,height);
        if(width>height){
            $(this).addClass('wide-img');
        }else{
            $(this).addClass('tall-img');
        }
    });

CSS

.tall-img{
    margin-top:-50%;
    width:100%;
}
.wide-img{
    margin-left:-50%;
    height:100%;
}

http://jsfiddle.net/b3PbT/

답변

에뮬레이션해야 background-size: contain했지만 object-fit지원 부족으로 사용할 수 없었습니다 . 내 이미지에는 정의 된 크기의 컨테이너가 있었고 결국 나를 위해 일했습니다.

.image-container {
  height: 200px;
  width: 200px;
  overflow: hidden;
  background-color: rebeccapurple;
  border: 1px solid yellow;
  position: relative;
}

.image {
  max-height: 100%;
  max-width: 100%;
  margin: auto;
  position: absolute;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}
<!-- wide -->
<div class="image-container">
  <img class="image" src="http://placehold.it/300x100">
</div>

<!-- tall -->
<div class="image-container">
  <img class="image" src="http://placehold.it/100x300">
</div>

스 니펫 확장

답변

설정 시도 모두 min-height 와 min-width함께 display:block:

img {
    display:block;
    min-height:100%;
    min-width:100%;
}

( 바이올린 )

이미지의 포함 요소가 position:relative또는 position:absolute인 경우 이미지가 컨테이너를 덮습니다. 그러나 중앙에 있지 않습니다.

이미지가 가로 (설정 margin-left:-50%) 또는 세로 (설정 margin-top:-50%)로 오버플로되는지 여부를 알고 있으면 이미지를 쉽게 가운데에 맞출 수 있습니다 . CSS 미디어 쿼리 (및 일부 수학)를 사용하여이를 파악할 수 있습니다.