当前位置:首页 > 前端技术 > 给img标签写自适应css样式

给img标签写自适应css样式

2022年08月06日 09:57:36前端技术6

html代码

<html>
<title>自适应图片</title>
<head>
<link href="./css/style.css"  rel="stylesheet"type="text/css" ></link>

</head>
<body>
<!--响应式图片-->
<img src="./img/bg.jpg" class="img-xys" alt="响应式图像">
</body>
</html>

css代码

.img-xys {
  display: inline-block;
  height: auto;
  max-width: 100%;
}

解释一下css代码

max-width: 100%; 和 height: auto; 属性,可以让图像按比例缩放,不超过其父元素的尺寸。

把元素的 display 属性设置为 inline-block,元素相对于它周围的内容以内联形式呈现,但与内联不同的是,这种情况下我们可以设置宽度和高度。

设置 height:auto,相关元素的高度取决于浏览器。

设置 max-width 为 100% 会重写任何通过 width 属性指定的宽度。这让图片对响应式布局的支持更友好。


作者:久伴亦久别
来源链接:https://blog.csdn.net/weixin_42501296/article/details/80754578

版权声明:
1、JavaClub(https://www.javaclub.cn)以学习交流为目的,由作者投稿、网友推荐和小编整理收藏优秀的IT技术及相关内容,包括但不限于文字、图片、音频、视频、软件、程序等,其均来自互联网,本站不享有版权,版权归原作者所有。

2、本站提供的内容仅用于个人学习、研究或欣赏,以及其他非商业性或非盈利性用途,但同时应遵守著作权法及其他相关法律的规定,不得侵犯相关权利人及本网站的合法权利。
3、本网站内容原作者如不愿意在本网站刊登内容,请及时通知本站(javaclubcn@163.com),我们将第一时间核实后及时予以删除。


本文链接:https://www.javaclub.cn/front/18424.html

标签: css
分享给朋友:

“给img标签写自适应css样式” 的相关文章

CSS放置显示a标签的下划线

  text-decoration: underline; text-decoration属性规定文本修饰(下划线 underline、上划线 overline、中划线 line-through) 作者:迷豆腐 来源链接:https://blog.cs...

优秀工具推荐:超实用的 CSS 库,样板和框架

优秀工具推荐:超实用的 CSS 库,样板和框架

当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文章中,我编译整理了我最喜欢的 CSS 样板,框架和库,帮助你在建立网站或应用程序时更加高效。   当启动一个新的项目,使用 CSS 框架或样板,可以帮助您节省大量的时间。在这篇文...

CSS:水平居中与垂直居中

CSS:水平居中与垂直居中

CSS居中算是一个比较基础的问题,在实际运用中,需要考虑到的一般是两种情况,一种是主要是表现为文字,图片等行内元素的居中,一种是指 div 等块级标签元素的居中。 水平居中 1、行内元素 行内元素(主要是表现为文字,图片等行内元素)...

css中*的用法

*是代表所有html中的标签 例.写了一个 *{box-sizing:border-box} .span-class{ width:80px; padding:20px; } 结果,span标签的内容宽度是80px,并不是40px...

CSS文字样式

notice:文字样式会被继承 一、常用的文字样式 1、设置文字的颜色    color:red; 2、设置文字的大小  font-size:30px; 3、设置文字的粗细,bold为加粗...

span标签垂直居中显示的正确方法

span标签居中显示的正确方法 方法一: <span style="text-align: center">水平居中</span> <span style="line-height:值为span的高度">垂直居中...

CSS 选取第几个标签元素

在前端开发中,我们可能会碰到这样的需求:想让列表中的第一个部分显示不同的样式 ,想让列表中的偶数部分显示不同的背景颜色,想让列表中的最后一部分样式不一样……这样的需求,我们怎样来实现?其实,如果前面文件是php开发的,可以通过php的循环语句+判断语句+css样式来实现。但是,如...

如何使用JS来改变CSS样式

如何使用JS来改变CSS样式 方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写)...

内联式css样式,直接写在现有的HTML标签中

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> &l...

【HTML&CSS】常用标签以及编写格式

【HTML&CSS】常用标签以及编写格式

一、学习内容回顾 HTML Hyper Text Markup Language:超文本标记语言 超文本:不仅仅是纯文本,还包括字体效果和多媒体(图片/音频/视频) ML标记语言: <开始 属性=“xxx”>标签体 学习HTML主要学习...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。