[CSS3] All abourt responsive image
css3 all Image Responsive
2023-09-14 09:00:50 时间
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: 0; } 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
相关文章
- 前端的3D(css3版本)--淘宝造物节3D创景的制作
- 【CSS3】纯CSS代码实现模拟时钟,+js对时功能。
- css3倾斜样式
- 第八十三节,CSS3动画效果
- 第八十节,CSS3边框图片效果
- 一些上流的CSS3图片样式 | CSS | 前端观察
- [CSS3] Use CSS Variables to Maintain the Aspect Ratio for an Element
- [React + CSS3] Create an Animate Content Placeholder for Loading State in React
- [CSS3] Define Form Element States with CSS Form Pseudo Classes
- [CSS3] CSS Media Queries
- [CSS3 Animation] TweenMax.staggerTo()
- CSS3 transform 引起z-index失效
- CSS3自定义滚动条样式 -webkit-scrollbar
- [Link]用HTML5/CSS3/JS开发Android/IOS应用
- CSS3去除手机浏览器button点击出现的高亮框
- css3 实现心跳
- CSS3与页面布局学习总结(九)——前端开发规范
- CSS3与页面布局学习总结(二)——Box Model、边距折叠、内联与块标签、CSSReset
- css3幻灯片换位效果
- 9种CSS3 blend模式制作的鼠标滑过图片标题特效