[CSS3] All abourt responsive image
Take few examples:
- Full size image: The problem for that is it overflow when the screen size is smaller than the image size. (BAD)
- width: 100%: The problem for that is when screen size is larger than image size, it blurs the image. (BAD)
- max-width: 100%: This is a good way, it ensure image is responsive and when the screen size is lareger it won't blur the image. (GOOD)
img {
max-width: 100%;
}- Two images with 50% width: (OK)
- Tow iamges with 50% width and margin: (GOOD), use calc() to help you
img:last-of-type {
margin-right:;
} img {
margin-right: 10px;
max-width: 426px;
width: calc((100% - 10px)/2);
}
Raster and Vector
Raster: means png image.
Vecctor: means svg image (BETTER). Because it scales without quality degradation.
Check you page speed:
https://developers.google.com/speed/pagespeed/insights/?url=simpl.info%2Fcssfilters.
https://developers.google.com/speed/docs/insights/OptimizeImages
[CSS3] All abourt responsive image的更多相关文章
- aspNet各种模块介绍
For browsers that do not support HTML5, you can use Modernizr. Modernizr is an open-source JavaScrip ...
- Create the Project
https://docs.microsoft.com/en-us/aspnet/web-forms/overview/getting-started/getting-started-with-aspn ...
- spring boot1.1 idea + springboot + mybatis(mybatis-generator) +mysql +html实现简单的登录注册
前言 这两年springboot比较火,而我平时的工作中不怎么使用spring boot,所以工作之余就自己写写项目练练手,也跟大家一起学习. 打算从最开始的搭架子,登录注册,到后台管理的增删改查,业 ...
- codepen 上25个最受欢迎的HTML/CSS代码
Codepen是一个非常了不起的网站,优设哥在设计师网址导航上也大力推荐过,得到了很多同学的喜爱,也是全球web前端开发人员的圣地! 我搜索了一些时下最好最流行的codepen(仅限于HTML和CSS ...
- CSS3教程:Responsive框架常见的Media Queries片段
CSS3 Media Queries片段在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段.移动端Media Queries片段iPhone5@media sc ...
- [CSS3] Responsive Table -- no more table
When the screen size is small, we can use "no more table" solution. So instead of render t ...
- CSS3与页面布局学习总结(四)——页面布局大全
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
- CSS3知识点整理&&一些demo
css3能做什么 响应式开发的基础,然后能实现一些酷炫的效果咯. 以下案例纯css3实现,一点都没用js (入门简单,但是水很深) 叮当猫纯用css3做出 http://codepen ...
- CSS3与页面布局学习笔记(四)——页面布局大全(负边距、双飞翼、多栏、弹性、流式、瀑布流、响应式布局)
一.负边距与浮动布局 1.1.负边距 所谓的负边距就是margin取负值的情况,如margin:-100px,margin:-100%.当一个元素与另一个元素margin取负值时将拉近距离.常见的功能 ...
随机推荐
- [SharePoint][SharePoint Designer 入门经典]Chapter10 Web部件链接
本章概要: 1.Web部件作用 2.如何添加和配置 3.如何个性化 4.如何导出,并在其他站点重利用 5.通过组合web part创建复杂的用户界面
- USACO 1.5 Number Triangles
Number Triangles Consider the number triangle shown below. Write a program that calculates the highe ...
- C# Parse and TryParse 方法详解
工作中遇到的常用方法: Parse and TryParse TryParse 方法类似于 Parse 方法,不同之处在于 TryParse 方法在转换失败时不引发异常 /// <summary ...
- MSSQL执行大脚本文件时,提示“内存不足”的解决办法
导出了一个脚本文件,将近900M,回来往sql studio一丢,报了个内存不足,然后就有了此文.. 问题描述: 当客户服务器不允许直接备份时,往往通过导出数据库脚本的方式来部署-还原数据库, 但是当 ...
- Java入门第一季
慕课网:http://www.imooc.com/learn/85 Java入门知识第一季 1.Java开发环境和IDE的使用: 2.变量和常量 3.常用的运算符 4.流程控制语句 5.数组:使用Ar ...
- 将查询到的数据导出到Excel终结版
吐槽 最近新项目需要用到导出数据到Excel,试了试之前写的一篇博文,但是感觉那个不太好,主要原因是没能实现样式控制,今天我们就来介绍一种新的导出Excel方法,而且这种方法很轻量级,它利用xml生成 ...
- BZOJ4819: [Sdoi2017]新生舞会(01分数规划)
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 1029 Solved: 528[Submit][Status][Discuss] Descripti ...
- PHP关于注册注意的问题
1.注意转义字符的问题 get_magic_quotes_gpc()开启时,所有的 ' (单引号), " (双引号), \(反斜线) and 空字符(null)会自动转为含有反斜线的溢出字符 ...
- Pyhton学习——Day10
#################################################################################################### ...
- 使用easyui combobox初始化+在input中触发下拉框+获取值
效果图: 1.html <input id="alarmLeve" class="easyui-combobox" name="alarmLev ...