-
classfavinavi为什么会选择微软的bing搜索作为默认的搜索引擎？ 了解onenav css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像） 使用CSS让大背景图片适应不同大小屏幕又一例 网络收藏夹的正确打开方式是怎样的？ CSS实现倾斜绶带式45°标签 更全面匹配UTF-8中文汉字的正则表达式 使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题 Ubuntu 22.04 live server更换亚马逊AWS的更新源 More...All tagskeyboard_arrow_down
-
folderCSSkeyboard_arrow_down
CSS背景图片分割之大图小用 无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS? 使用CSS让大背景图片适应不同大小屏幕又一例 一个使用CSS/HTML将图像自适应屏幕的示例 网页图片CSS进阶篇——优化图片，提升网页加载速度 CSS学习笔记：flex布局做出元素两端对齐效果 CSS学习心得：多行文本两端对齐，同时溢出部分自动截断并添加省略号... MDUI前端框架，表格头position: sticky无效的问题 几种CSS字体描边和阴影效果 CSS3特效“喜欢/Like”动态按钮，一颗会跳动的心脏 More...
-
folderHTMLkeyboard_arrow_down
了解onenav 无法明确指定大图的宽度width和height时，如何避免累计布局位移CLS? 关于网页上的复选框checkbox的checked和value的问题 使用CSS让大背景图片适应不同大小屏幕又一例 一个使用CSS/HTML将图像自适应屏幕的示例 CSS3+SVG实现的带音效、会抖动的小铃铛图标特效 CSS3 一款漂亮的带渐变背景和关闭按钮的卡片头样式 HTML5时代，使用同一个背景图片的多个链接自动适配不同屏幕宽度的一种方法 css实现图标或图片等元素镜像翻转（水平镜像、垂直镜像） CSS实现倾斜绶带式45°标签 More...
-
folderjavascriptkeyboard_arrow_down
javascript捕获缺省的组合快捷键，比如CTRL+F 关于网页上的复选框checkbox的checked和value的问题 自用小工具：正则表达式测试是否能匹配字符串 CSS3+SVG实现的带音效、会抖动的小铃铛图标特效 php/javascript的一些关于时间处理的函数 更全面匹配UTF-8中文汉字的正则表达式 https协议下javascript复制内容到剪贴板
-
folderPHP/Otherkeyboard_arrow_down
我的酱香之路 A PHP method for determining whether a browser supports AVIF images php判断浏览器是否支持avif格式图片的一种方法 统计搜索引擎对网站地图文件或robots.txt的访问记录的一种方法 网站的页面访问量以及搜索引擎爬虫访问量的统计方法 网络收藏夹网站开发过程中PHP正则表达式忘记使用非贪婪模式带来的一次教训 Apache2网站安装开通https协议SSL证书 php/javascript的一些关于时间处理的函数 更全面匹配UTF-8中文汉字的正则表达式 Ubuntu 22.04 live server更换亚马逊AWS的更新源 More...
-
folderITkeyboard_arrow_down
家用服务器proxmox 7.3开启samba共享目录 你的网站会有不请自来的访客吗？ 网站开发测试环境启用https，使用自签发ssl证书不是个好主意 搭建家庭用服务器全套攻略，300元一台小主机全部搞定 mysql8开启主从同步注意事项，否则会动不动就出错停止 使用基于Cookie-Free域名加载CSS时，解决字体文件无法加载的问题 Applebot是什么？ win11安装跳过TPM2.0和安全启动检查的方法 网络收藏夹的正确打开方式是怎样的？ favinavi网络收藏夹Ver 2.0开发笔记之更精细适配各类屏幕 More...
Online notes
favinavi - online bookmark
一个使用CSS/HTML将图像自适应屏幕的示例
by: fanshome
2023-06-03 06:06(UTC)
Demo
在这个示例中，我们将图像的最大宽度设置为100%，并将高度设置为自动。此外，我们还添加了一个样式，以使图像居中于其容器元素中。这将确保图像在不同大小的屏幕上都能适当地缩放，不会失真或拉伸。
注意：部分浏览器（比如微软的edge）不支持AVIF格式图片，所以演示时无法显示图片。
CSScontent_copyCopy codes
img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}htmlcontent_copyCopy codes
<img src="/images/coding/demo_1920x1080.avif" alt="自适应图片示例">visibility 927
favinavi - for heavy web user
Online notes
-
subject mysql8开启主从同步注意事项，否则会动不动就出错停止
默认情况下，mysql只允许本地登录，如果要开启主从同步，主机必须开启远程连接，则需要修改mysqld配置文件，以ubuntu 22.04+mysql8.0为例...
-
subject How long a new website can occupy the first position of search engine
Whether a new website can rank first on the main keywords depends on many factor...
-
subject 了解onenav
https://blog.xiaoz.org/archives/16772
-
subject Ubuntu 22.04 live server更换亚马逊AWS的更新源
amzon亚马逊云AWS的更新源，即使在国内速度也基本可接受，其最大特点是软件丰富，常用软件包几乎没有找不到的。 具体步骤如下：
-
subject 发现一只有趣的蜘蛛——“BSbot”
最近发现有一个有趣的蜘蛛来访，它的User Agent是这么写的： BSbot 1.1 (monthly copyright check - html/js/...
-
subject 网站开发测试环境启用https，使用自签发ssl证书不是个好主意
如题，即使你折腾了一圈把自签发证书安装好了，最后一步还是会遇到浏览器不认证书的问题（比如最新版的chrome），即便你已经添加了“信任此根证书颁发机构”。带着“...
Post a comment