스펀지형 이미지의 실현 기술

주로 회사 내부를 대상으로 학습회에서 쓴 것이다.
이미지 리스트와 상자의 이미지를 작성한 경우 이미지 크기가 균일한 상태에서 나란히 표시되면 언뜻 보기에는 가지런하지만 들어오는 이미지 크기가 같을 수는 없습니다.브라우저 크기와 창 크기의 가로 세로 비율도 변경됩니다.
거기서 자주 사용하는 방법을 생각해 볼게요.background, object-fit, max-width 속성을 사용하는 경우도 많다.

background

.sampleImg {
  background-image: url("image.png");
  background-size: cover;
}

↑ 익숙한 백 그라운드

object-fit

img {
  width: 250px;
  height: 250px;
  object-fit: cover; /* これ */
}

↑ IE면

max-width

img { 
  height：auto; 
  width：100％;
  max-width：720px; /* これ */
}

↑ 괜찮아 보이지만 상태에 따라 max-width가 작용하지 않는 문제점도 많다.
그럼 다른 방법이 없을까요?

srcset 사용해 보세요.

<img src="img/sample-img.jpg"
     srcset="img/sample-img-320.jpg 320w,
             img/sample-img-640.jpg 640w"
     sizes="50vw">

320w640w?
→ 이것은 그림을 표시할 때의 브라우저 너비입니다
사이즈스vw가 뭐예요?
이것은viewport width의 약칭인 것 같습니다.viewport의 너비에 대한 비율 (%) 을 가리킵니다.
1000px 너비로 열 때

100vw = 1000px * 100% = 1000px　
50vw  = 1000px * 50%  = 500px
30vw  = 1000px * 30%  = 約333px

sizes 표시

sizes="(max-width: 320px) 280px,
       (max-width: 480px) 440px"

이렇게 복수로 지정할 수 있는 느낌.

srcset도picture 탭에서 사용할 수 있습니다

<picture>
  <source media="(max-width: 799px)" srcset="hoge-480w.jpg">
  <source media="(min-width: 800px)" srcset="hoge-800w.jpg">
  <img src="hoge-800w.jpg">
</picture>

이런 느낌으로 화면 크기가 다른 그림을 읽습니다.
JS를 사용하지 않고 HTML만 사용하면 완성됩니다.
겸사겸사 IE 가 대응을 안 했어요.

IE 대응으로 picturefill라는 프로그램 라이브러리를 가져와 행복해질 것 같았다.

참고 자료