div 左侧响应图像固定 100% 高度，div 右侧文本可滚动

Question

如果文本大于屏幕，如何创建左侧 div 具有响应式固定图像和右侧 div 具有可滚动文本的图像。当您调整页面大小时，例如当屏幕小于 1024px

时，只有右侧 div 会更改并移至左侧 div 下方

这是显示我正在寻找的内容的屏幕截图：http://www.500milligrammes.com/facticemagazine/final/fancy/brouillon2.jpg

Answer 1

您只需向您的 css 添加一个媒体查询，以便将您的 css 属性设置为特定宽度的不同值，如下所示：

@media (max-width: 1024px){
    #left_side  {   
        width:100%;
    }
    #content{
        width:100%;
        position:static;
        margin: 0px;
    }
}

这是一个包含以上代码的 jsfiddle：http://jsfiddle.net/AndrewL32/d2b1jhxb/1/

（Increase/decrease 输出屏幕大小以查看它是否有效）

div 左侧响应图像固定 100% 高度，div 右侧文本可滚动

div left responsive image fixed 100% height and div right text scrollable

html

javascript

css

jquery

background-position