브라우저 창과 함께 이미지 크기를 조정할 수있는 방법이 궁금합니다. 여기 에 지금까지 한 작업이 있습니다 (또는 전체 사이트를 ZIP 파일로 다운로드 ).
이것은 Firefox에서 잘 작동하지만 Chrome에서는 문제가 있습니다. 이미지의 크기가 항상 조정되는 것은 아니며 페이지가로드 될 때 창 크기에 따라 달라집니다.
이것은 Safari에서도 잘 작동하지만 때로는 이미지가 최소 너비 / 높이로로드됩니다. 아마도 이것은 이미지 크기 때문일 수 있지만 확실하지 않습니다. (올바르게로드되면 여러 번 새로 고침하여 버그를 확인하세요.)
이걸 어떻게 더 방탄하게 만들 수 있는지에 대한 아이디어가 있습니까? (자바 스크립트가 필요하다면 저도 함께 살 수 있지만 CSS가 더 좋습니다.)
답변
이것은 순수한 CSS로 수행 할 수 있으며 미디어 쿼리도 필요하지 않습니다.
이미지를 유연하게 만들려면
max-width:100%및height:auto. 이미지max-width:100%와height:autoIE7에서 작동,하지만 IE8에서 (예, 다른 이상한 IE 버그). 이 문제를 해결하려면width:auto\9IE8 에 추가해야합니다 .출처 : http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
CSS :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}이미지의 고정 된 최대 너비를 적용하려면 컨테이너 내부에 배치하기 만하면됩니다. 예를 들면 다음과 같습니다.
<div style="max-width:500px;">
<img src="..." />
</div>여기에 JSFiddle 예제가 있습니다 . JavaScript가 필요하지 않습니다. 최신 버전의 Chrome, Firefox 및 IE에서 작동합니다 (내가 테스트 한 전부입니다).
답변
2018 년 이후 솔루션 :
뷰포트 관련 단위를 사용하면 고양이 이미지가 있으므로 생활이 더 쉬워집니다.
이제 우리는 종횡비를 존중하면서이 고양이를 코드에 넣기를 원합니다.
img {
width: 100%;
height: auto;
}<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">지금까지는별로 흥미롭지 않지만 cats 너비를 뷰포트의 최대 50 %로 변경하려면 어떻게해야할까요?
img {
width: 100%;
height: auto;
/* Magic! */
max-width: 50vw;
}<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">동일한 이미지이지만 이제 최대 너비 가 50vw
vw (= 뷰포트 너비)로 제한된다는 것은 제공된 숫자에 따라 이미지가 뷰포트의 X 너비가됨을 의미합니다. 이것은 높이에도 적용됩니다.
img {
width: auto;
height: 100%;
max-height: 20vh;
}<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">이것은 이미지의 높이를 뷰포트의 최대 20 %로 제한합니다.
답변
window.onresize = function(){
var img = document.getElementById('fullsize');
img.style.width = "100%";
};IE에서 onresize이벤트는 모든 픽셀 변경 (너비 또는 높이)에서 발생하므로 성능 문제가있을 수 있습니다. 자바 스크립트의 window.setTimeout ()을 사용하여 몇 밀리 초 동안 이미지 크기 조정을 지연합니다.
http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html
답변
resize 속성을 둘 다로 설정합니다. 그런 다음 다음과 같이 너비와 높이를 변경할 수 있습니다.
.classname img{
resize: both;
width:50px;
height:25px;
}답변
jQuery를 사용하고 있습니까?
jQuery 플러그에 대한 빠른 검색을 수행했고이 작업을 수행하는 플러그인이있는 것 같기 때문에이 플러그인을 확인하면 작동합니다.
http://plugins.jquery.com/project/jquery-afterresize
편집하다:
이것은 CSS 솔루션이며 style = “width : 100 %” 를 추가하고 최소한 크롬과 Safari에서 저에게 적합합니다. 나는 ie가 없으므로 거기에서 테스트하고 알려주십시오. 여기에 코드가 있습니다.
<div id="gallery" style="width: 100%">
<img src="images/fullsize.jpg" alt="" id="fullsize" />
<a href="#" id="prev">prev</a>
<a href="#" id="next">next</a>
</div>답변
처음에는 다음 html / css를 사용했습니다.
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}<div>
<img src="..." />
</div>그런 다음 다음 과 같이 추가 class="img"했습니다 <div>.
<div class="img">
<img src="..." />
</div>그리고 모든 것이 잘 작동하기 시작했습니다.
답변
CSS3 scale속성을 사용 하여 CSS로 이미지 크기를 조정할 수 있습니다 .
.image:hover {
-webkit-transform:scale(1.2);
transform:scale(1.2);
}
.image {
-webkit-transition: all 0.7s ease;
transition: all 0.7s ease;
}추가 읽기 :