HTML img图片大小设置与父元素相同的代码

img图片大小

在默认的情况下,HTML文档使用img元素(标签)引入图片的大小会显示为图片本身的大小,如果要设置img图片的大小刚好与img的父元素,比如div的大小一样,那该怎么设置?其实可以直接使用img的width和height属性来完成,其中width和height分别设置宽度和高度,值分别为100%。

提示:img的width和height可以写在style属性之中,也可以写在style属性之外,不同的是,写在style之外需要使用“=”来设置属性值大小,写在style之内,则使用“:”,具体可参考下方的实例代码。

img图片大小设置与父元素相同实例代码,及在线编辑器

如果将img图片大小设置的与父元素相同,可能导致图片变形,那要怎样才能不变形,又能较好地铺满整个父元素呢?这个将在以后的文章中介绍。

<img src='../../static/img/test.jpg' width='100%' height='100%'>

提示:使用img标签定义HTML中的图片时,可以将alt属性一同写入,用于在图片因为网速或其它的一些问题而无法加载时用于提示用于那是什么,这是对用户对搜索都友好的设置。当然,上面的实例中并没有这样设置,但那是在实例中,代码经过处理的,页面加载时,浏览器并不会渲染出图片,对浏览器而言,那是一些文本。

免责声明:内容仅供参考,不保证正确性!


全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.