保持柔性框中的图像宽高比
问题描述:
所以我想让图像旁边有文字,并且都居中。 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>
这是什么,我试图做一个例子。我认为弹性盒会为此工作,我只是有点麻烦。
答
喜欢这个?
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;
}
答
你需要把图像到另一个容器,以便其内在的尺寸将不会受到影响。
.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>
好像[此答案](http://*.com/questions/39545915/css-limit-the-height-from-scroll-dynamically/39546076#39546076)将帮助你在这里...还请注意,有[在使用柔性版时缩小图像的问题](http://*.com/questions/39259196/displayflex-image-sizing-centering/39397683#39397683) – kukkuz
并始终更好地将'img'封装在div中... – kukkuz