网页图片缩放的深入剖析

noONE 发布于2019-08-29 12:42 / 3654人阅读

摘要：一浏览器图片缩放默认表现行为行为在想出解决方案之前，首先要弄清楚浏览器对于图片尺寸是怎么处理的，稍安勿躁，一步一步来分析下。图片宽度随容器宽度缩放，图片宽高比不变，图片高度高于容器时会溢出。

一、浏览器图片缩放默认表现行为行为

在想出解决方案之前，首先要弄清楚浏览器对于图片尺寸是怎么处理的，稍安勿躁，一步一步来分析下。
一个图片可以改变成任意尺寸，容器是80%：

不加任何属性：

img {}
div{
  width:80%;
  background-color:pink;
  text-align: center;
}

图片默认是不会缩放的，宽高是图片原尺寸，图片宽高高于容器时会溢出。

width:100%

img {
  width:100%;
}
div{
  width:80%;
  background-color:pink;
  text-align: center;
}

图片宽度随容器宽度缩放，图片宽高比不变，图片高度高于容器时会溢出。

max-width:100%

tips: max-height:100%效果是一样的

img {
  max-width:100%;
}
div{
  width:80%;
  background-color:pink;
  text-align: center;
}

图片图片宽度随容器宽度缩放，图片宽高比不变，图片高度高于容器时会溢出，
但缩放不会超过原图宽高。

二、解决方案 1、图片容器宽度百分比，高度自适应；图片等比例自适应

还是上面那个例子，图片任意尺寸，容器是80%：

容器高度无限制时

img {
   max-width: 100%;
/*   max-height: 400px; */
}
div{
  width:80%;
/*   min-height: 300px; */
  background-color:pink;
  text-align: center;
}

容器设置最大高度

img {
   max-width: 100%;
   max-height: 400px; 
}
div{
  width:80%;
/*   min-height: 300px; */
  background-color:pink;
  text-align: center;
}

容器设置最小高度

tips:此时若图片小于最小高度，图片垂直居中(采用flex布局)

img {
   max-width: 100%;
/*   max-height: 400px; */
}
div{
  width:80%;
  min-height: 300px;
  background-color:pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

容器设置最大最小高度

img {
   max-width: 100%;
  max-height: 400px;
}
div{
  width:80%;
  min-height: 300px;
  background-color:pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

2、图片容器宽高百分比；图片等比例自适应

html,body{
  height: 100%;
}

.wrapper{
  width:80%;
  height:80%;
  background-color: pink;
}
.image{
  width: 100%;
  height: 100%;
  background-image: url("https://dummyimage.com/600x400/000/fff");
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #aaa;
}

3、图片容器宽高百分比；图片居中覆盖不缩放（显示不完整但不失真）

html,body{
  height: 100%;
}

.wrapper{
  width:80%;
  height:80%;
  background-color: pink;
}
.image{
  width: 100%;
  height: 100%;
  background-image: url("https://dummyimage.com/600x400/000/fff");
  background-size: cover;
  background-position: center center;
}

4、使用picture元素或媒体查询，不同场景加载不同图片

如果元素与当前的和元素协同合作将大大增强响应式图像的工作进程。它允许你放置多个source标签，以指定不同的图像文件名，进而根据不同的条件进行加载。

具体看：picturefill

GPU云服务器云服务器深入剖析nginx 背景图片的缩放网页缩放图片缩放

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112082.html

CSS及布局

摘要：经过半年的打磨，正式发布，主要是新增了一些常用组件，并使用命名，为接下来的微信小程序开发做好准备。这两种方式实现的瀑布流式布局均支持首屏和网页窗口大小改变时的列数自适应。主要是对于标准里的布局方式草案中的布局方式进行一些总结。一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看...

jaysun 2019-08-29 14:04 评论0 收藏0
移动web开发问题和优化小结

摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...

galaxy_robot 2019-08-01 17:40 评论0 收藏0
移动web开发问题和优化小结

摘要：如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨移动开发问题和优化小结。关于和鼠标事件的延迟说明，我引用叶小钗大神博客里面的一张图片，如下在手机上，的延迟将近。 1.前言到目前为止，互联网行业里，手机越来越智能化，移动端占有的比例越来越高，尤其实在电商，新闻，广告，游戏领域。用户要求越来越高，网站功能越来越好，效果越来越炫酷，这就要求我们产品质量越来越高，web前端开...

ysl_unh 2019-08-21 16:44 评论0 收藏0
【移动端web开发】（二）深入viewport

摘要：当你进行页面放大的时候，原本在未缩放的页面上看起来很小的尺寸，现在通过看上去变大了，事实上这部分的的值并没有变化，仅仅是因为进行放大后，的的值所占的屏幕分辨率的值变大了。同理的的值并没有发生变化但是值所占的屏幕分辨率的值变小了。前言通过上一篇我们已经大概明白viewport是什么，但是viewport并没有那么简单，一包研究得身心疲惫，脑子一个不够用哈哈，让我们一起看看吧！三个v...

Baoyuan 2019-08-22 16:58 评论0 收藏0
以最简单的例子，深入剖析函数如何进行初始化工作，入栈，出栈全过程

摘要：在一个函数中的内容执行前会做一些变量的初始化工作，就是图中下的内容。输出完后，函数出栈，函数变为活动状态，因为没有返回值，所以仍然为同时执行下一语句，如下图执行与相同，先是函数入栈，输出然后将返回值赋给后出栈。 window.onload = function(){ debugger; var variable1,//定义变量1但没有赋值...

lastSeries 2019-08-20 11:30 评论0 收藏0