반응 형 디자인을 만들 때 머리글 내 이미지 크기 조정

Question

웹 사이트 용 반응 형 레이아웃을 만들 때 머리글 내부에있는 이미지를 크기가 변경되지 않도록하려면 (확장 및 축소) 어떻게해야합니까? (따라서 브라우저를 좌우로 드래그하면 모바일 크기인지 데스크톱 크기인지에 관계없이 어떤 크기를 사용하든 상관없이 페이지 상단에 같은 크기와 같은 위치가 유지됩니다.

Answer 1

이런 종류의 질문은 예제가 없으면 대답하기가 어렵지만 대답하기가 어렵습니다. (이 기능을 구현하는 데 필요한 조합이 많아서 상황에 맞는 것을 선택하는 것이 어려운 부분입니다)

(이미지가 그리 크지 않기 때문에) 좋은 예는 아니지만 배경과 오버플로의 조합을 사용하면 다음과 같은 효과를 만들 수 있습니다.

div{ 
 
    overflow:hidden; 
 
    height:200px; 
 
    width:100%; 
 
    background: url(http://placekitten.com/g/300/300); 
 
    }

<div></div>

,313,210

은 참고 이미지 크기를 변경하지만 (그들은 '자른'하는 당신이, 예를 들어, 그것의 발을 볼 수 없습니다) 대신 자르기되지 않습니다. 배경 이미지

만약을 사용하지 않고

---

그러나, 대신 단순히 <img> 태그를 사용하고, 당신은 (다시) 유사한 접근 방법을 사용할 수 있습니다. 이 하나는 부모 DIV의 이미지를 래핑하고 '추가 이미지'

div { 
 
    height: 300px; 
 
    width: 200px; 
 
    overflow: hidden; 
 
}

<div> 
 
    <img src="http://placekitten.com/g/300/300" /> 
 
</div> 
 

 
note: the image is 300 by 300px in size, but won't 'stretch', but in fact crop.