html图片大小设置,图片居中设置,图片自适应大小方法详解

作者:IT技术 | 时间:2018-10-26

html图片的宽度和高度怎么设置,html如何实现图片居中显示,图片怎么在页面中自动适应DIV容器大小,下面我就为你来详细讲解下。

html图片的宽度和高度怎么设置

(1)直接在图片标签设置宽度width和高度height,单位,默认为PX像素。

html图片的宽度和高度怎么设置

(2)通过CSS样式控制width、height

img{width:150px;height:60px} 

html如何实现图片居中显示

直接在html在标签对象内加“align="center"”即可让对象内图片横向水平居中显示。

<!DOCTYPE html> 
<head> 
<meta charset="utf-8" /> 
<title>图片横向居中</title> 
</head> 
<body> 
<div align="center"><img src="images/logo.gif" /></div> 
</body> 
</html>

使用CSS样式让DIV内图片居中(水平居中)

<!DOCTYPE html> 
<head> 
<meta charset="utf-8" /> 
<title>图片横向居中</title> 
<style> 
.boxs{text-align:center} 
</style> 
</head> 
<body> 
<div class="boxs"><img src="images/logo.gif" /></div> 
</body> 
</html>

图片高度随宽度自适应

要图片跟随屏幕大小显示,可以将图片与div的宽度调整为100%,并且body不设置宽度(或者也设置为100%),在使用不同屏幕浏览网页时,图片将自动铺满屏幕。

使html中div内的图片随屏幕大小调节的操作方法为,将div与img的宽度都设置为100%,代码如下:

<!DOCTYPE html> 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片大小自适应</title>
<style type="text/css">
div,img{ width:100%;}
</style>
</head>
<body>
    <div>
    <img src="20150930010349.jpg" />
    </div>
</body>
</html>