css/js 图片自适应、自动满屏和拉伸问题解决

2019年10月3日05:44:14 发表评论 72 浏览数

网站要自适应,其中一个工作就是必然要对图片的宽度进行处理。一般来说,网站图片插入的时候,编辑器会自动增加width和height的值,也就是图片的宽度高度,虽然可以去掉,也可以定义,但是也比较麻烦。下面给出几个方案

自适应大小

首先通过浏览器-审核元素-定位到img图标标签的上一层DIV,或者直接把所有图片的宽度都自适应。直接用img也可以。

css/js 图片自适应、自动满屏和拉伸问题解决

上面图片可以看出定位到 .tab-content ,那么代码如下:

  1. .tab-content img {
  2. max-width:  100%;
  3. widthauto;
  4. heightauto;
  5. }

这里的max-width是定义最大宽度,也就是最大的宽度是多少,可以是固定值也可以是比例。

自动满屏

上面这个方法,有时候在屏幕比较大的时候,图片又显得比较小了。比如图片750px,实际的地方又按照比例分配剩下比较大的空间,想填充满屏,或者几乎满屏,可以这样。

  1. .tab-content img {
  2.     max-width100%;
  3.     widthauto;
  4.     heightauto;
  5.     min-width100%;
  6. }

这里介绍下,min-width 是定义最小宽度,也就是最小显示多少,可以是固定的值也可以是百分比。

图片拉伸解决

就象前面所说的,也是这个文章重点写的(毕竟上面的内容网上应该还是很多介绍的)。插入图片会自动载入宽度高度。定义了宽度,高度就会拉伸,但是页面又是就近原则处理的,也就是会收到height的影响。那么我们可以去掉这个高度吗?手工去掉显然太麻烦。所以用JS。

  1. var arr = $('img');
  2. arr.each(function() {
  3.    $(this).css('height','auto');
  4. });

上面这个方法,可以给img标签添加height="auto"的定义。这样如果原来有定义高度的会被覆盖掉。

PS:需要jquery库的支持哈。

zdgcc

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: