保持柔性框中的图像宽高比

所以我想让图像旁边有文字，并且都居中。 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

保持柔性框中的图像宽高比

回答

相关问题