.box {width:100%;height width:auto;} .box { width:100%;height width:auto;}

今天主要学习 HTML 中博客中设置引叺的图片总是不能随着移动端的适配进行友好的展示。今天查阅了一些相关资料进行了优化,在这里做个总结!

做法很简单只要设置對应图片的 width 和 htight 的具体数值就可以了。看下面的例子:

这样设置图片的话可以使图片在指定的空间内缩放。4 行的意思是:

  • width:auto;图片的宽度自己適应(图片有多宽就显示多宽)
  • height width:auto;图片的高度自己适应(图片有多高就显示多高)
  • width:auto;和 height width:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
  • max-width:100%;圖片的宽度不能超过图片所在的空间的宽度
  • max-height width:100%;图片的高度不能超过图片所在的空间的高度

【注:本文源自网络文章资源由站长整理发布】


如果将box-sizing设为border-box则用的是IE盒模型如果在ie6,78中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型所有的浏览器都会把盒模型解释为W3C盒模型。在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制默认值为content-box,即标准盒模型

以上讨论的子元素都是非绝对定位元素的情况,如果是子元素绝对定位的え素而父元素是非static定位元素同时在所有元素都是border-box的情况下,子元素的border+padding+content = 父元素的padding+content(可以理解为padding-box但实际上并没有这种box-sizing值)。

CSS3的calc()函数calc()函数可以計算不同单位的表达式的值,表达式可以是“+”、“-”、“*”、“/”,其中加减符号前后必须要有空格乘除不必须,但是为了保持风格一致可以都保留空格。
因此可以通过calc计算函数来强行实现与width: auto一致的效果:

这两个方法是没问题的但我在項目中遇到了问题。
我要获取隐藏元素iframe中一个height width为auto的元素高度。再将此高度赋给iframe让高度适应。卸载iframe的load回调函数中但是获取的高度始终為0。 但是当iframe显示后再获取便可以获取到。
我的解决办法如下如有更好的方案,一起交流

我要回帖

更多关于 height width 的文章

 

随机推荐