基于图像的CSS最小高度

所以，目前我正在尝试根据图片的高度而不是文本的高度来设置一些CSS桌面内容的最小高度。基于图像的CSS最小高度

从本质上说，我的布局是这样的：

<Image @60% width> | <Text @40% width>

而且我目前使用柔性框来这样做。

但是，现在，当页面被调整大小时（我无法使用静态高度，因为它需要完全响应），在某个点，图像变得非常小，文本使得容器变得巨大。

我想，理想情况下，文本与图像在任何时候都是一样的高度，并且如果有溢出，它将基于滚动。

这是我目前的Jsfiddle。

http://jsfiddle.net/D7h3z/4/

我不反对使用那些新/实验技术。我不喜欢使用JavaScript，因为应该没有必要。如果我确实需要，我不使用JQuery，所以如果可以的话，请尽量避免使用JQuery。

来源

2014-06-13 Varda Elbereth

图像的尺寸是否固定在所有情况下？ –

@ZachSaucier在这种情况下，他们是。尽管如果可能，我想让它们自动按100％的宽度缩放。 –

如果不使用flex，你可以这样做[http://jsfiddle.net/Zeaklous/u4UTE/1/]。不知道如何以任何其他方式做... –

3检查出我对你的小提琴所做的更改 - New Fiddle

从本质上讲，我做了说明绝对定位的范围内，然后放在它的容器跨度溢出-Y自动。我应用了200像素的最小高度到img容器，它看起来像你所描述的那样工作。如果情况并非如此，请告诉我。

.description { 
    width: 40%; 
    padding: 10px; 
    position: relative; 
    overflow-y:scroll; 
} 

.imagebox { 
    width: 60%; 
    min-width: 300px; 
} 

.imagebox img { 
    width: 100%; 
    min-height:200px 
} 

.description span { 
    padding: 10px; 
    position: absolute; 
}

EDIT实际上不起作用100％的是，图像不保持纵横比... 悲伤长号

编辑2加在一个最小宽度几分得到它，但从动态的角度来看，这远非理想。今晚晚些时候我会再看一次。

来源

2014-06-14 01:26:11 BlakePetersen

基于图像的CSS最小高度

回答

相关问题