Question

第一部分：

我正在尝试编写一个带有div的布局，左边有一些文字，右边有一个高大的图片，底部有50％高的彩色条形div。

div和图像必须按比例缩放。文本不会缩放，但必须始终保持正确定位。

我在大多数时候都取得了成功，但在响应能力方面遇到了麻烦。如何使彩色条形图与图像成比例？

第二部分：

我遇到的另一个挑战是为响应度设置一个“停止点”。此停止点的目标是使布局保持固定（不再缩小），直到达到移动断点。换句话说，我希望图像和div能够以更大的分辨率无限扩展，但只能缩小直到达到此停止点。

我正在制作此文章的人不希望文本布局在移动断点到达之前更改。因此，我无法在较低的移动前分辨率下保留设计的比例（例如：宽度为800-900像素）。这是因为文本在达到特定大小/位置后会与图像或div栏重叠。

以下是我的目标模型：

http://i.imgur.com/sPrIiJ4.jpg

这里有一个代码，我现在的代码与我想要的相反，但它显示了当前存在的所有元素。 http://jsfiddle.net/0cf5n6mc/2/

.home4 {
position:relative;
height: 765px;
background-color: #FFF;
margin-right: 20px;
margin-left: 20px;
}


.feature4text {
position:absolute;
color: red;
left: 10%;
width: 300px; 
top:20px;
}

.orangesm {
z-index: 1;
position: relative;
height:100%;
height: 514px;
}


#feat4assets {
  float:right;
  position: relative;
}

 #orangebar {
background-color: #F78B5C;
width: 100%;
height: 382px;
bottom: 0px;
left: 0px;
position: absolute;
}


.photo-or { 
    height:100%; 
    width: 100%; 
}
.photo-or img { max-height:100%; 
    max-width:100%; 
    width:auto; 
    vertical-align:middle; 
    position: relative;
}

如果有人能指出我正确的方向，我真的很感激！谢谢！

按比例缩放div块和图像+设置停止点

0 个答案: