下面是我的项目图像和我要实现的布局。在下面的示例中,我将图像用作背景,然后使用相对和绝对定位(临时解决方案,仅用于显示布局)来定位标题。问题是,我希望布局能够响应,在这种情况下,它不是...
我要实现的目标:
位置标题以它们在下图中的方式显示(需要对每个设备保持响应)
用背景色替换背景图片(但无论屏幕的宽度如何,都必须保持width:height-1:1的比例)
我想实现容器div(标题7)的圆形外观,就像它的左侧图像一样,但是如果我将固定高度和边框半径设置为100%,则在较小的屏幕上查看时会破裂
提前致谢!
Layout
///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////////////////////////////////////////// ///////////////
在这里找到解决方案:
Maintain the aspect ratio of a div with CSS
最佳答案
这就是我要实现的方法。
<div class="col-md-3"></div>
<div class="col-md-3 col-md-offset-3"></div>
<div class="col-md-6"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-12></div>
这种简单的布局将允许您正确设置所有列。然后,您只需将内容放入其中,引导程序就会自动将其设置为响应式。我不知道为什么您只需要更改填充/页边距等来按自己的喜好来设置相对位置。
我上面的代码只是布局,以实现您的布局,分别填充它们,您应该会看到结果。
圆形图片=边框半径:30像素(以及以上(取决于图片的大小,因此请摆弄)。不需要一定的百分比。)
标题,使用h1标签将它们放置在列中,使用类设置它们的样式并居中。
如果您要在图像上放置文字,则可以填充:-20px;甚至在文本上留出-20像素的空白以移动它,但是您通常可以使用text-align来实现:居中/左/右;然后显然对图像和文本进行z索引,确保文本类似于z-index:10,并且图像为z-index:5;将文本放在图像上。