이미지를 브라우저 창에 맞추는 방법은 무엇입니까?
- DDD원래의
- 2024-10-30 06:29:27513검색
브라우저 창에 이미지를 맞추는 방법: 종합 가이드
웹 개발 영역에서는 브라우저 내에서 이미지를 원활하게 표시합니다. 창은 독특한 도전 과제를 제시합니다. 브라우저 창과 이미지 크기를 모두 수용할 수 있는 적절한 이미지 크기를 결정하는 것은 여전히 일반적인 딜레마입니다. 이 기사에서는 브라우저 창에 효과적으로 맞도록 이미지 크기를 조정하는 복잡한 과정을 자세히 살펴보고 관련된 복잡한 문제를 포괄적으로 해결합니다.
이미지 크기 조정의 목표
조화로운 통합 달성 웹 레이아웃에 이미지를 추가하려면 다음 기준을 충족해야 합니다.
- 종종 알 수 없는 브라우저 창의 크기가 이미지 크기를 결정해서는 안 됩니다.
- 알 수 없는 이미지의 원래 크기 크기 조정 과정을 방해해서는 안 됩니다.
- 이미지는 원래 비율을 유지하면서 가로 세로 비율을 유지해야 합니다.
- 이미지는 잘리거나 왜곡되지 않고 창 안에 완전히 표시되어야 합니다.
- 스크롤바는 바람직하지 않으며 이미지가 창에 맞으면 나타나지 않아야 합니다.
- 이미지는 창 크기의 변화에 동적으로 반응하여 원래 크기를 초과하지 않고 사용 가능한 공간을 채워야 합니다.
CSS 전용 솔루션
순수한 CSS 솔루션을 찾는 사람들을 위해 다음 코드는 브라우저 창 크기에 따라 이미지를 우아하게 가운데에 배치하고 크기를 조정합니다.
<code class="html"><html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src='pic.png'>
</div>
</body>
</html></code>
jQuery 기반 솔루션
또는 이 jQuery 기반 솔루션은 이미지 컨테이너(이 경우 본문)의 높이가 브라우저 창 높이와 동일하도록 보장하여 이미지의 최대 높이를 허용합니다. -의도한 대로 작동하는 높이:
<code class="html"><!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit {
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="pic.jpg">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() {
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html></code>위 내용은 이미지를 브라우저 창에 맞추는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.