基于尺寸的响应式内边距

为了衬托一个响应式宽度的图像元素,需要添加相对的内边距。如果使用静态的宽度内边距,图像内边距在较小的浏览器窗口中可能会显得过大,从而与其他附近元素相互挤压,甚至可能将图像挤出屏幕。

准备工作

理解盒模型属性的计算是一个好的开始。一个对象所占的总宽度是它的实际宽度加上它两边的内边距,边框以及外边距,即2*(外边距+边框+内边距)+内容的宽度=总宽度。

实现方式

假设一张图像在正常的非响应式状态下的宽度为200px,典型的内边距可能是8px,因此使用之前的盒模型,公式如下:2x(0+0+8px)+200px=216px

为了找到内边距的百分比,使用内边距除以总宽度,即8/216 = 0.037,舍入为4%

在创建响应式百分比宽度图像之前,先创建CSS和HTML。给该图像添加一个内边距为4%的类。

<style>
p.text {
    float:left; width:60%;
}
div.img-wrap{
    float:right; margin:0px; width:38%;
}
img.responsive {
    max-width:100%; height:auto; padding:4%;
</style>
<p class="text">ipsum dolor sit amet, consecteturadi...</p>
<div class="img-wrap">
    <img alt="robot image" class="responsive" src="robot.png?watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/Center/dx/10/dy/10">
    <p>ipsum dolor sit amet, consecteturadipiscingelit...</p>
</div>

为了帮助你看到实际内边距宽度随着浏览器窗口尺寸的改变而变化,可以给图像的CSS添加一个背景颜色background-color:#cccccc;

工作原理

图像内边距设置为100%则会紧贴其父元素的边缘。当父元素尺寸变化时,图像内边距也会相应调整。如果盒模型所对应的各项参数计算得当,布局将会成功地响应浏览器窗口的宽度变化。

吐槽 (1)
  • 版权声明:本文内容由互联网用户自发贡献,本站不拥有所有权,不承担相关法律责任。如果发现本站有涉嫌抄袭的内容, 欢迎发送邮件至 postmaster@zzyzan.com 举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。
  • 本作品是由 小乖乖资源共享网 会员 自学成才 的投递作品。
  • 欢迎转载,但请务必注明来源地址:http://www.zzyzan.com/skill/responsive/8586.html

- 评论

  • 加载中,请稍候…
我要吐槽