保持柔性框中的圖像寬高比

所以我想讓圖像旁邊有文字，並且都居中。 Flexbox似乎可以很好地工作，但圖像不斷變形。關於如何將圖像保持原始高寬比的任何想法？保持柔性框中的圖像寬高比

.container { 
 
    display: flex; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    border: red 1px solid; 
 
} 
 
img { 
 
    height: 300px; 
 
    width: 300px; 
 
} 
 
p { 
 
    padding: 30px; 
 
}

<div class="container"> 
 
    <p class="inner">Lorem Pisum Doelem sipsum iflup getsup in da tubsusb 
 
    </p> 
 
    <img src="https://i.vimeocdn.com/portrait/15351700_300x300" /> 
 
</div>

這是什麼，我試圖做一個例子。我認爲彈性盒會爲此工作，我只是有點麻煩。

http://mojave-demo.squarespace.com/our-team-mojave/

來源

2016-10-04 MarcelloHutchinson-Trujillo

好像[此答案]（http://stackoverflow.com/questions/39545915/css-limit-the-height-from-scroll-dynamically/39546076#39546076）將幫助你在這裏...還請注意，有[在使用柔性版時縮小圖像的問題]（http://stackoverflow.com/questions/39259196/displayflex-image-sizing-centering/39397683#39397683） – kukkuz

並始終更好地將'img'封裝在div中... – kukkuz

喜歡這個？

https://jsfiddle.net/y5k9zqby/

.container { 
display: flex; 
width: 100%; 
margin: 0 auto; 
border: red 1px solid; 
} 

img{ 
max-height: 300px; 
width: 100%; 
overflow:hidden; 

} 

p{ 
padding: 30px; 
}

來源

2016-10-04 23:46:37

你需要把圖像到另一個容器，以便其內在的尺寸將不會受到影響。

.container { 
 
    align-items: center; 
 
    display: flex; 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    border: red 1px solid; 
 
} 
 

 
.image { 
 
    flex: 1; 
 
    max-width: 50%; 
 
    min-width: 50%; 
 
} 
 

 
img { 
 
    width: 100%; 
 
    height: auto; 
 
    display: block; 
 
} 
 

 
p { 
 
    padding: 30px; 
 
    flex: 1; 
 
}

<div class="container"> 
 
    <p class="inner">Lorem Pisum Doelem sipsum iflup getsup in da tubsusb 
 
    </p> 
 
    <div class="image"> 
 
    <img src="https://i.vimeocdn.com/portrait/15351700_300x300" /> 
 
    </div> 
 
</div>

來源

2016-10-05 04:03:50

保持柔性框中的圖像寬高比

回答

相關問題