img 말고 figure, div 태그 내 style로 이미지를 조작하자

img태그를 이용해서 움직이고 자르는 작업은 굉장히 불편하다. img 태그 하나만 망치면 모르겠는데 관련된 태그가 다 어긋나는 등 굉장히 짜증나는 상황도 발생한다. 이럴 경우 필자는 figure 태그 내부에 background-image를 style로 줌으로써 해결한다. background-size, background-position, background-repeat 등을 사용할 수 있기 때문이다.

 

img에서 벗어나자!

 

<ul class="user-list message-list">
    <li class="user-item message-item">
    <figure
        class="user-photo"
        style="background-image: url(images/hatkid.jpg);" // images 폴더 내 이미지 사용
    ></figure>
    </li>
</ul>

.user-photo {
  width: 50px;
  height: 50px;
  border: 1px solid grey;
  border-radius: 50%;
  background-color: gold;
  background-repeat: none;
  background-position: center;
  background-size: cover;
}

 

figure 태그 안에 img를 넣었을 경우 display:none으로 설정하자.

<ul class="card-list">
    <li class="card-item">
    <figure
        class="card-image"
        style="background-image: url(images/game.png)"
    >
        <img src="images/game.png" alt="gameimage" />
    </figure>
    </li>
</ul>

.card-image {
  height: 0;
  padding-bottom: 60%;
  background-color: lightgray;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.card-image img {
  display: none;
}

 

 

React를 사용할 경우에는 props를 이용해 div를 figure와 같이 사용할 수 있다.

 

const Poster = styled.div`
  background-image: url(${(props) => props.bg});
  height: 100%;
  width: 100%;
  background-size: cover;
  background-position: center center;
`;


export default ({ id, bg }) => (
  <Container>
    <Link to={`/${id}`}>
      <Poster bg={bg} />
      <button>Like</button>
    </Link>
  </Container>
);