CSS에서 이미지를 React적으로 만드는 방법이야

반응형

안녕하세요 여러분

안녕 친구들, 여기는 스노우비트입니다. 저는 열정적이고 독학한 젊은 프런트엔드 웹 개발자로 성공적인 개발자가 되고자 합니다.

오늘, 저는 여러분을 곤경에 빠트리는 것을 돕고 구할 수 있는 멋진 CSS 트릭을 가지고 왔습니다.

가자...

 

웹 개발자가 모바일 반응 이미지를 만들고 모든 콘텐츠를 뷰포트에 적절히 맞추는 것은 매우 중요하다.

[플래시 안 함]에서 이미지를 선택합니다. (선택 사항 중 하나)

이제 HTML 파일에 이미지를 추가할 차례입니다.

<img src="https://images.unsplash.com/photo-1644868731706-bdb6485f4274?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=930&q=80" class="img"/>

 

이제 결과를 살짝 볼까 합니다.

이미지 크기를 조정하려고 노력하셨나 보네요?
이미지가 반응하지 않고 에서 휴대 전화에서 보기 불편함을 알 수 있습니다.

이제 CSS의 초강대국 를 도입하여 정중하게 살펴보겠습니다.

  width: 100%;
    max-width: 400px;
  height: auto;

여기서는 이미지에 100% 너비와 독립 높이를 제공하며, 여기서 최대 너비 속성은 완전히 선택 사항입니다.

 

이게 최종 결과입니다.

읽어주셔서 감사합니다, 좋은 하루 보내세요!
당신의 감상이 저의 동기입니다 - 좋아요

• Twitter 팔로우 - @code withsnowbit
• YouTube 구독 - SnowBit을 사용한 코드

해피 코딩!