2017-12-19 5 views
0

모든 이미지를 여전히 응답 성을 유지하면서 같은 크기로 만들려면 어떻게해야합니까?CSS - 동일한 크기의 이미지

는 여기에 바이올린입니다 :

https://jsfiddle.net/2ko9g725/2/

이 모든 CSS입니다 :

.ui.text.menu { 
    background-color: #eee; 
    margin-top: 0; 
} 

.ui.message { 
    padding: 50px 50px; 
    margin-bottom: 20px !important; 
} 

.ui.grid.stackable.container { 
    display: flex; 
    flex-wrap: wrap; 
} 
+0

이미지를 반응 적으로 유지하려고 시도한 내용이 있습니까? – mast3rd3mon

+0

많이 시도하지 않았습니다. 난 그냥 픽셀을 하드 코딩하지 않고 이미지의 크기를 조정하는 방법을 찾고 있는데 – George

+0

부트 스트랩이 내가 할 수있는 것 같아요. (제 생각 엔) – mast3rd3mon

답변

1

확인이 Demo. 그것은 당신이

CSS

img.ui.image{ 

    max-width: 100%; 
    height: auto; 
    max-height: 100px; 
    margin: auto; 
    display: block; 
} 
.ui.segment { 
    width: 100%; 
} 
+0

작은 뷰포트에서 이미지를 늘리지 않는 방법이 있습니까? – George

+0

부트 스트랩을 선호하십니까? –

+0

@ jasinthpremkumar sure – George

0

확인 this 바이올린 도움이 될 수 있습니다. 이미지가 들어갈 수 있도록 UI 세그먼트 안에 래퍼 div를 놓은 다음 해당 래퍼에 높이와 너비를 부여한 다음 object-fit : CSS의 img 요소에 너비와 높이가 100 % 인 커버를 추가합니다.

body { 
 
    margin: 0; 
 
    display: flex; 
 
} 
 

 
.segment { 
 
    width: 30%; 
 
    border: 1px solid black; 
 
    padding: 10px; 
 
    margin: 10px; 
 
} 
 

 
.seg-img { 
 
    height: 80%; 
 
    width: 100%; 
 
} 
 

 
img { 
 
    object-fit: cover; 
 
    height: 100%; 
 
    width: 100%; 
 
}
<div class="segment"> 
 
    <div class="seg-img"> 
 
    <img src="https://images.unsplash.com/photo-1464061884326-64f6ebd57f83?auto=format&fit=crop&w=1500&q=80"> 
 
    </div> 
 
    <p>TEST</p> 
 
</div> 
 

 
<div class="segment"> 
 
    <div class="seg-img"> 
 
    <img src="https://images.unsplash.com/photo-1440658172029-9d9e5cdc127c?auto=format&fit=crop&w=1652&q=80"> 
 
    </div> 
 
    <p>TEST</p> 
 
</div> 
 

 
<div class="segment"> 
 
    <div class="seg-img"> 
 
    <img src="https://images.unsplash.com/photo-1474015833661-686ed67f9485?auto=format&fit=crop&w=1500&q=80"> 
 
    </div> 
 
    <p>TEST</p> 
 
</div>

0

난 그냥 수정 된 작은 뷰포트에 스트레칭

이미지로 바이올린을 업데이트 한

확인이 fiddle

방금 ​​CSS에서 변경했습니다.

img.ui.image{ 
    overflow: hidden; 
    width: 100%; 
    max-width: 50%; 
    height: auto; 
    max-height: 100px; 
    margin: auto; 
    display: block; 
} 
관련 문제