需要准备的材料分别有:电脑、chrome浏览器、html编辑器。
1、首先,打开html编辑器,新建一个html文件,例如:index.html。
2、其次,在index.html中的<style>标签中,输入css样式代码:body {background: url(image7.jpg) no-repeatbackground-size: 250px}。
3、最后,浏览器运行index.html页面,此时用CSS强制了图片占用250px宽度的大小并且是等比例自动缩放。
html代码如下:<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>div中放置图片</title><link rel="stylesheet" href="liu.css"/></head><body><div class="center"><img src="./image/1.jpg"rel=""/></div></body></html>
css代码如下:
*{
margin: 0
padding: 0
}
/*方法一*/
.center{
width: 500px
height: 300px
background: pink
/*实现div里的图片水平垂直居中*/
display: table-cell
text-align: center
vertical-align: middle
}
.center>img{
/*1,图片过大1024*1024,让图片和布局高度宽度等比例缩放*/
width: 300px
height: 180px
}