Marco adaptable de imágenes CSS
Use img para configurar
<!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>
Como puede ver, esta imagen tiene un tamaño adaptativo en el marco div. Esta operación es muy adecuada para la creación de una página web habitual, porque siempre necesita usar la imagen para insertarla en su página web para la visualización correspondiente. Echemos un vistazo a el original. ¿Qué tamaño tiene la imagen?
Oh ya veo. ¿Ocupa toda la pantalla de vez en cuando? Ahora se ha escalado a este tamaño de acuerdo con sus requisitos, tal vez pueda cumplir con sus requisitos, si no, ¡continuamos!
Definir fondo
<!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>
¡Hazlo!