CSS를 통해 높이와 너비가 다른 모든 이미지를 동일하게 만들려면 어떻게해야합니까?
제품 사진으로 구성된 이미지 월을 만들려고합니다. 불행히도 모두 높이와 너비가 다릅니다. CSS를 사용하여 모든 이미지를 같은 크기로 보이게하려면 어떻게해야합니까? 바람직하게는 100 x 100.
나는 높이와 너비가 100px 인 div를 만들고 어떻게 채우는지를 생각하고있었습니다. 어떻게해야할지 모르겠습니다.
어떻게하면 되나요?
.img {
position: relative;
float: left;
width: 100px;
height: 100px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
}<div class="img" style="background-image:url('http://i.imgur.com/tI5jq2c.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/37w80TG.jpg');"></div>
<div class="img" style="background-image:url('http://i.imgur.com/B1MCOtx.jpg');"></div>이미지를 너무 많이 왜곡하면, 즉 비율을 벗어난 경우 제대로 보이지 않을 수 있습니다.-작은 양은 좋지만 이미지를 '컨테이너'안에 넣는 것이 좋습니다. 컨테이너를 100 x 100으로 설정 한 다음 이미지를 오버플로하지 않도록 설정하고 가장 작은 너비를 컨테이너의 최대 너비로 설정하면 이미지가 약간 잘립니다.
예를 들면
<h4>Products</h4>
<ul class="products">
<li class="crop">
<img src="ipod.jpg" alt="iPod" />
</li>
</ul>
.crop {
height: 300px;
width: 400px;
overflow: hidden;
}
.crop img {
height: auto;
width: 400px;
}
이렇게하면 이미지가 컨테이너의 크기를 유지하지만 제약 조건을 깨지 않고 크기가 조정됩니다.
가장 간단한 방법-이미지 크기를 그대로 유지하고 다른 영역을 공간으로 채 웁니다. 이렇게하면 이미지 크기에 관계없이 모든 이미지가 늘어나지 않고 동일한 지정된 공간을 차지합니다.
.img{
width:100px;
height:100px;
/*Scale down will take the necessary specified space that is 100px x 100px without stretching the image*/
object-fit:scale-down;
}
object-fit속성을 사용 하여 img요소의 크기를 조정할 수 있습니다 .
cover컨테이너를 채우기 위해 이미지를 비례 적으로 늘리거나 줄입니다. 이미지는 필요한 경우 가로 또는 세로로 잘립니다.contain컨테이너 내부에 맞도록 이미지를 비율에 따라 늘리거나 줄입니다.scale-down컨테이너 내부에 맞도록 이미지를 비례 적으로 축소합니다.
.example {
margin: 1em 0;
text-align: center;
}
.example img {
width: 30vw;
height: 30vw;
}
.example-cover img {
object-fit: cover;
}
.example-contain img {
object-fit: contain;
}<div class="example example-cover">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>
<div class="example example-contain">
<img src="https://i.stack.imgur.com/B0EAo.png">
<img src="https://i.stack.imgur.com/iYkNH.png">
<img src="https://i.stack.imgur.com/gne9N.png">
</div>위의 예에서 빨간색은 가로, 녹색은 세로, 파란색은 정사각형 이미지입니다. 체크 무늬 패턴은 16x16px 정사각형으로 구성됩니다.
부트 스트랩을 사용 하고 응답 성을 잃고 싶지 않은 사람들 은 컨테이너의 너비를 설정하지 마십시오. 다음 코드는 gillytech 게시물을 기반으로 합니다.
index.hmtl
<div id="image_preview" class="row">
<div class='crop col-xs-12 col-sm-6 col-md-6 '>
<img class="col-xs-12 col-sm-6 col-md-6"
id="preview0" src='img/preview_default.jpg'/>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
more stuff
</div>
</div> <!-- end image preview -->
style.css
/*images with the same width*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: auto;
width: 100%;
}
또는 style.css
/*images with the same height*/
.crop {
height: 300px;
/*width: 400px;*/
overflow: hidden;
}
.crop img {
height: 100%;
width: auto;
}
다음과 같이 할 수 있습니다.
.container{
position: relative;
width: 100px;
height: 100px;
overflow: hidden;
z-index: 1;
}
img{
left: 50%;
position: absolute;
top: 50%;
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
max-width: 100%;
}
CSS 파일에서 높이 및 너비 매개 변수 설정
.ImageStyle{
max-height: 17vw;
min-height: 17vw;
max-width:17vw;
min-width: 17vw;
}이미지 크기는 div 높이와 너비에 의존하지 않습니다.
CSS에서 img 요소 사용
다음은 도움이되는 CSS 코드입니다.
div img{
width: 100px;
height:100px;
}
div로 크기를 설정하려면
이것을 사용하십시오
div {
width:100px;
height:100px;
overflow:hidden;
}
이 코드를 사용하면 이미지가 원래 크기로 표시되지만 처음 100x100px 오버플로 표시는 숨겨집니다.
코드가 없으면 도움이되지 않지만 다음과 같은 실용적인 조언이 있습니다.
나는 당신의 "이미지 월"에 스타일을 부여하기 위해 ID 또는 클래스가있는 일종의 컨테이너가 있다고 생각합니다.
예 :
<body>
<div id="maincontainer">
<div id="header"></div>
<div id="content">
<div id="imagewall">
<img src"img.jpg">
<!-- code continues -->
Styling a size on all images for your image wall, while not affecting other images, like you logo, etc. is easy if your code is set up similar to the above.
#imagewall img {
width: 100px;
height: 100px; }
But if your images are not perfectly square they will be skewed using this method.
Go to your CSS file and resize all your images as follows
img {
width: 100px;
height: 100px;
}
I was looking for a solution for this same problem, to create a list of logos.
I came up with this solution that uses a bit of flexbox, which works for us since we're not worried about old browsers.
This example assumes a 100x100px box but I'm pretty sure the size could be flexible/responsive.
.img__container {
display: flex;
padding: 15px 12px;
box-sizing: border-box;
width: 100px; height: 100px;
img {
margin: auto;
max-width: 100%;
max-height: 100%;
}
}
ps.: you may need to add some prefixes or use autoprefixer.
Based on Andi Wilkinson's answer (the second one), I improved a little, make sure the center of the image is shown (like the accepted answer did):
HTML:
<div class="crop">
<img src="img.png">
</div>
CSS:
.crop{
height: 150px;
width: 200px;
overflow: hidden;
}
.crop img{
width: 100%;
height: auto;
position: relative;
top: 50%;
-webkit-transform: translateY(-50%); /* Ch <36, Saf 5.1+, iOS < 9.2, An =<4.4.4 */
-ms-transform: translateY(-50%); /* IE 9 */
transform: translateY(-50%); /* IE 10, Fx 16+, Op 12.1+ */
}
.article-img img{
height: 100%;
width: 100%;
position: relative;
vertical-align: middle;
border-style: none;
}
You will make images size same as div and you can use bootstrap grid to manipulate div size accordingly
'IT TIP' 카테고리의 다른 글
| jquery의 promise 메서드는 실제로 어떻게 작동합니까? (0) | 2020.11.25 |
|---|---|
| 새 탭에서 면도기 작업 링크를 여는 방법은 무엇입니까? (0) | 2020.11.25 |
| Pandas 데이터 프레임의 마지막 데이터 행을 삭제하는 방법 (0) | 2020.11.25 |
| C #은 왜 C처럼 로컬 정적 변수를 지원하지 않습니까? (0) | 2020.11.25 |
| 벡터를 반복하고 특정 항목을 제거합니다. (0) | 2020.11.25 |