모든 이미지가 동일한 높이와 너비로 나타나도록 축소판 갤러리를 구성하기 위해 며칠 동안 노력해 왔습니다. 그러나 Css 코드를 다음과 같이 변경하면
max-height: 150px;
max-width: 200px;
width: 120px;
height: 120px;
모두 같은 크기의 이미지를 얻었지만 가로 세로 비율이 늘어나서 이미지가 망가집니다. 대신 이미지가 아닌 이미지 컨테이너의 크기를 조정하는 방법이 없습니까? 가로 세로 비율을 유지할 수 있습니다. 그러나 여전히 이미지 크기를 조정하십시오. (이미지의 일부를 잘라도 괜찮습니다.)
미리 감사드립니다!
답변:
모든 이미지의 비율이 같지 않으면 CSS 크기 조정과 관련된 알려진 문제입니다. CSS를 통해이 작업을 수행 할 방법이 없습니다.
가장 좋은 방법은 컨테이너를 가지고 이미지의 크기 중 하나 (항상 동일)의 크기를 조정하는 것입니다. 내 예에서는 너비를 조정했습니다.
컨테이너에 지정된 크기 (내 예에서는 너비)가있는 경우 이미지에 너비를 100 %로 지정하면 컨테이너의 전체 너비가됩니다. auto높이에서 이미지가 새로운 폭과 높이가 비례 할 것이다.
전의:
HTML :
<div class="container">
<img src="something.png" />
</div>
<div class="container">
<img src="something2.png" />
</div>
CSS :
.container {
width: 200px;
height: 120px;
}
/* resize images */
.container img {
width: 100%;
height: auto;
}
한쪽 (예 : 높이)을 고정하고 다른 쪽을로 설정해야합니다 auto.
예
height: 120px;
width: auto;
한 면만 기준으로 이미지 크기를 조정합니다. 이미지 자르기가 허용되는 경우
overflow: hidden; 그렇지 않으면 크기를 초과하는 모든 항목을 잘라냅니다.
overflow: hidden초과 부분을 자르기 위해 부모를 특정 너비로 제한
object-fitcss3 속성을 사용할 수 있습니다.
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
.holder {
display: inline;
}
.holder img {
max-height: 200px;
max-width: 200px;
object-fit: cover;
}
</style>
</head>
<body>
<div class='holder'>
<img src='meld.png'>
</div>
<div class='holder'>
<img src='twiddla.png'>
</div>
<div class='holder'>
<img src='meld.png'>
</div>
</body>
</html>그러나 컨테이너를 늘리지 않기 때문에 정확한 대답은 아니지만 갤러리처럼 작동하고 img자체 스타일을 유지할 수 있습니다 .
이 솔루션의 또 다른 단점은 css3 속성에 대한 지원이 부족하다는 것입니다. 자세한 내용은 http://www.steveworkman.com/html5-2/javascript/2012/css3-object-fit-polyfill/에서 확인할 수 있습니다 . jQuery 솔루션도 거기에서 찾을 수 있습니다.
이미지를 늘리지 않으려면 오버플로없이 div 컨테이너에 넣고 필요한 경우 여백을 조정하여 가운데에 맞 춥니 다.
<div id="app">
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
<div id="container">
<img src="#" alt="something">
</div>
</div>
div#container {
height: 200px;
width: 200px;
border: 1px solid black;
margin: 4px;
}
img {
max-width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
}
transform: scale(0.5);<div>Normal</div>
<div class="scaled">Scaled</div>
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.scaled {
transform: scale(0.7); /* Equal to scaleX(0.7) scaleY(0.7) */
background-color: pink;
}
참조 : https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale