CSS image adaptive framework
Use img to set
<!DOCTYPE html>
<html>
<style>
body{
margin: 0;
padding: 10px;
}
#a_1{
display: block;
width: 100px;
height: 50px;
overflow: hidden;
padding: 10px;
border: dashed;
margin: 10px;
}
#a_1img{
width: 100%;
height: 100%;
}
</style>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<div id="a_1">
<img id="a_1img" src="img/1.jpg"/>
</div>
</body>
</html>
As you can see, this image is adaptively sized in the frame div. This operation is very suitable for the usual web page creation, because you always need to use the image to insert into your web page for corresponding display. Let’s take a look at the original one. How big is the picture?
Oh I see. Is it taking up the entire screen from time to time? Now it has been scaled to this size according to your requirements, maybe it can meet your requirements, if not, let's continue!
Set background
<!DOCTYPE html>
<html>
<style>
body{
margin: 0;
padding: 10px;
}
.a_1{
display: block;
width: 100px;
height: 50px;
overflow: hidden;
padding: 10px;
border: dashed;
margin: 10px;
background-image: url(img/1.jpg);
}
.a_1img{
width: 100%;
height: 100%;
}
.BgImg{
background-size:contain;
}
#BgImg{
background-size:contain;
}
#a_1{
display: block;
width: 100px;
height: 50px;
overflow: hidden;
padding: 10px;
border: dashed;
margin: 10px;
background-image: url(img/1.jpg);
}
</style>
<head>
<meta charset="{CHARSET}">
<title></title>
</head>
<body>
<div class="a_1 BgImg " >
<!--<img id="a_1img" src="img/1.jpg"/>-->
</div>
</body>
</html>
Get it done!