CSS를 사용하여 브라우저 크기로 이미지 크기를 자동으로 조정
브라우저 창 크기를 조정할 때 이미지 전체 (또는 일부)의 크기가 자동으로 조정되기를 원합니다. 다음 코드를 찾았습니다. 그래도 아무 작업도하지 않습니다.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="icons">
<div id="contact">
<img src="img/icon_contact.png" alt="" />
</div>
<img src="img/icon_links.png" alt="" />
</div>
</body>
</html>
CSS
body {
font-family: Arial;
font-size: 11px;
color: #ffffff;
background: #202020 url(../../img/body_back.jpg) no-repeat top center fixed;
background-size: cover;
}
#icons {
position: absolute;
bottom: 22%;
right: 8%;
width: 400px;
height: 80px;
z-index: 8;
transform: rotate(-57deg);
-ms-transform: rotate(-57deg);
-webkit-transform: rotate(-57deg);
-moz-transform: rotate(-57deg);
}
#contact {
float: left;
cursor: pointer;
}
img {
max-width: 100%;
height: auto;
}
기본적으로 전체 화면 디자인 (사용 background-size: cover)을 갖고 div브라우저 창 크기를 조정할 때 요소가 정확히 동일한 위치 (% 현명함)에 있도록 할 수 있으며, 크기도 조정됩니다 (예 cover: 배경에서 수행됨)?
이미지를 유연하게 만들려면
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
예 :
img {
max-width: 100%;
height: auto;
width: auto\9; /* ie8 */
}
and then any images you add simply using the img tag will be flexible
JSFiddle example here. No JavaScript required. Works in latest versions of Chrome, Firefox and IE (which is all I've tested).
image container
Scaling images using the above trick only works if the container the images are in changes size.
The #icons container uses px values for the width and height. px values don't scale when the browser is resized.
Solutions
Use one of the following approaches:
- Define the width and/or height using
%values. - Use a series of
@mediaqueries to set the width and height to different values based on the current screen size.
This may be too simplistic of an answer (I am still new here), but what I have done in the past to remedy this situation is figured out the percentage of the screen I would like the image to take up. For example, there is one webpage I am working on where the logo must take up 30% of the screen size to look best. I played around and finally tried this code and it has worked for me thus far:
img {
width:30%;
height:auto;
}
That being said, this will change all of your images to be 30% of the screen size at all times. To get around this issue, simply make this a class and apply it to the image that you desire to be at 30% directly. Here is an example of the code I wrote to accomplish this on the aforementioned site:
the CSS portion:
.logo {
position:absolute;
right:25%;
top:0px;
width:30%;
height:auto;
}
the HTML portion:
<img src="logo_001_002.png" class="logo">
Alternatively, you could place ever image you hope to automatically resize into a div of its own and use the class tag option on each div (creating now class tags whenever needed), but I feel like that would cause a lot of extra work eventually. But, if the site calls for it: the site calls for it.
Hopefully this helps. Have a great day!
The following works on all browsers for my 200 figures, for any width percentage -- despite being illegal. Jukka said 'Use it anyway.' (The class just floats the image left or right and sets margins.) I can't imagine why this isn't the standard approach!
<img class="fl" width="66%"
src="A-Images/0.5_Saltation.jpg"
alt="Schematic models of chromosomes ..." />
Change the window width and the image scales obligingly.
참고URL : https://stackoverflow.com/questions/16217355/automatically-resize-images-with-browser-size-using-css
'IT박스' 카테고리의 다른 글
| 두 클래스가 하나의 div에 할당되면 클래스가 무시됩니다. (0) | 2020.12.07 |
|---|---|
| 파이썬 정규식 일치를 통해 반복 (0) | 2020.12.07 |
| 특정 파일에서 pep8 오류를 비활성화하는 방법은 무엇입니까? (0) | 2020.12.07 |
| Firebase 연결 명확화 (0) | 2020.12.07 |
| 문자열에 PHPUnit의 다른 문자열이 포함되어 있는지 테스트하는 방법은 무엇입니까? (0) | 2020.12.07 |