브라우저 창에 맞게 이미지 크기를 조정하는 방법은 무엇입니까?
이것은 사소한 것처럼 보이지만 모든 연구와 코딩 후에도 작동하지 않습니다. 조건은 다음과 같습니다.
- 브라우저 창 크기를 알 수 없습니다. 따라서 절대 픽셀 크기와 관련된 솔루션을 제안하지 마십시오.
- 이미지의 원래 크기는 알 수 없으며 브라우저 창에 맞을 수도 있고 맞지 않을 수도 있습니다.
- 이미지는 수직 및 수평 중앙에 있습니다.
- 이미지 비율은 보존되어야합니다.
- 이미지는 창에 전체적으로 표시되어야합니다 (자르지 않음).
- 스크롤바가 표시되는 것을 원하지 않습니다 (이미지가 맞으면 표시되지 않아야합니다).
- 창 크기가 변경되면 이미지 크기가 자동으로 조정되어 원래 크기보다 크지 않고 사용 가능한 모든 공간을 차지합니다.
기본적으로 내가 원하는 것은 다음과 같습니다.
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
위 코드의 문제는 작동하지 않는다는 것입니다. 그림은 세로 스크롤 막대를 추가하여 필요한 모든 세로 공간을 차지합니다.
내 처분은 PHP, Javascript, JQuery이지만 CSS 전용 솔루션을 위해 죽일 것입니다. IE에서 작동하지 않더라도 상관 없습니다.
업데이트 2018-04-11
다음은 자바 스크립트가없는 CSS 전용 솔루션입니다. 이미지가 동적으로 중앙에 배치되고 창에 맞게 크기가 조정됩니다.
<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>
JQuery를 사용하는 [other, old] 솔루션은 이미지 body
의 max-height
속성이 예상대로 작동 하도록 이미지 컨테이너 ( 아래 예) 의 높이를 설정합니다 . 클라이언트 창 크기가 조정되면 이미지 크기도 자동으로 조정됩니다.
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
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() { // set body height = window height
$('body').height($(window).height());
}
$(document).ready(function() {
$(window).bind('resize', set_body_height);
set_body_height();
});
</script>
</body>
</html>
참고 : 사용자 gutierrezalex는이 페이지에서 JQuery 플러그인과 매우 유사한 솔루션을 패키징했습니다.
다음은 간단한 CSS 전용 솔루션 ( JSFiddle )이며 모든 곳에서 작동하며 모바일 및 IE가 포함됩니다.
CSS 2.0 :
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
HTML :
<body>
<img src="images/your-image.png" />
</body>
CSS3는이 경우 창인 뷰포트를 기준으로 측정되는 새로운 단위를 도입합니다. 이들은 vh
하고 vw
있는 측정 뷰포트의 높이와 폭이 각각. 다음은 간단한 CSS 전용 솔루션입니다.
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
한 가지주의 할 점은 페이지의 높이에 기여하는 다른 요소가없는 경우에만 작동한다는 것입니다.
이미지 주위에 컨테이너 요소를 배치하려는 경우 순수한 CSS 솔루션은 간단합니다. 99 % 높이는 부모 요소가 자식을 포함하기 위해 수직으로 확장 될 때 의미가 없습니다. 부모는 고정 된 높이 (예 : 뷰포트의 높이)를 가져야합니다.
HTML
<!-- use a tall image to illustrate the problem -->
<div class='fill-screen'>
<img class='make-it-fit'
src='https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg'>
</div>
CSS
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img.make-it-fit {
max-width: 99%;
max-height: 99%;
}
함께 플레이 바이올린 .
내 일반적인 게으른 CSS 규칙 :
.background{
width:100%;
height:auto;
background: url('yoururl.jpg') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}
This may zoom in on your image if it is low-res to begin with (that's to do with your image quality and size in dimensions. To center your image, you may also try (in the CSS)
display:block;
margin: auto 0;
to center your image
in your HTML:
<div class="background"></div>
Resize Image to Fit the Screen by the Longest Side maintaining its Aspect Ratio
img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
width: 100vw
- image width will be 100% of view portheight: auto
- image height will be scaled proportionallymax-height: 100vw
- if image height would become more than view port it will be decreased to fit the screen, consequently image width will be decreased because of the following propertyobject-fit: contain
- the replaced content is scaled to maintain its aspect ratio while fitting within the element's content boxNote:
object-fit
is fully supported only since IE 16.0
width: 100%;
overflow: hidden;
I believe that should do the trick.
html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}
Or maybe check this out: http://css-tricks.com/how-to-resizeable-background-image/
I had a similar requirement, and had to do it it basic CSS and JavaScript. No JQuery available.
This is what I got working.
<html>
<head>
<style>
img {
max-width: 95% !important;
max-height: 95% !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</head>
<body onload='FitImagesToScreen()'>
----
</body>
</html>
Note : I haven't used 100% for image width as there was always a bit of padding to be considered.
Building upon @Rohit's answer, this fixes issues flagged by Chrome, reliably resizes the images, and also works for multiple images that are vertically stacked, e.g. <img src="foo.jpg"><br><img src="bar.jpg"><br><img src="baz.jpg">
There is probably a more elegant way of doing this.
<style>
img {
max-width: 99vw !important;
max-height: 99vh !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName('img');
if(images.length > 0){
document.styleSheets[1].rules[0].style["max-height"]=((100/images.length)-1)+"vh";
for(var i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = 'auto';
}
}
}
}
</script>
</HEAD>
<BODY onload='FitImagesToScreen()' onresize='FitImagesToScreen()'>
<img src="foo.png">
</BODY>
Make it simple. Thanks
.bg {
background-image: url('https://images.unsplash.com/photo-1476820865390-c52aeebb9891?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vw;
}
<div class="bg"></div>
참고URL : https://stackoverflow.com/questions/6169666/how-to-resize-an-image-to-fit-in-the-browser-window
'developer tip' 카테고리의 다른 글
'rt'및 'wt'모드에서 파일 열기 (0) | 2020.09.03 |
---|---|
Log4j2에서 프로그래밍 방식으로 로그 수준 변경 (0) | 2020.09.03 |
Flask의 정적 파일-robot.txt, sitemap.xml (mod_wsgi) (0) | 2020.09.02 |
IntelliJ가 선언을 찾을 수 없습니다. (0) | 2020.09.02 |
SpringData : "delete by"가 지원됩니까? (0) | 2020.09.02 |