0
261
Vistas¿Cómo mantener la relación de aspecto al cambiar el tamaño en css?
Estoy tratando de mantener la relación de aspecto mientras cambio el tamaño de div de esta manera:
.item { display: flex; flex-direction: column; position: absolute; background-color: white; height: 20rem; width: 20rem; min-height: 10rem; min-width: 10rem; background-color:green; resize: both; overflow: hidden; } .item_img { position: relative; display: inline-block; width: 100%; height: 100%; background-image: url(https://i.ibb.co/NYCtjSn/unknown.png); background-repeat: no-repeat; background-size: contain; } <div class="item"> <div class="item_img" draggable="false"></div> </div>pero estoy tratando de reemplazar la imagen con css puro en lugar de tener que mantener un enlace para cargar la imagen:
.item { display: flex; flex-direction: column; position: absolute; background-color: green; height: 20rem; width:20rem; min-height: 10rem; min-width: 10rem; resize: both; overflow: hidden; } .item_img { position: relative; display: inline-block; width: 100%; height: 100%; } .unknown_icon { height: 100%; width: 100%; background-color: gray; position: relative; overflow: hidden; } .unknown_icon::before { content: ""; position: absolute; height: 35%; width:35%; border-radius: 50%; top: 30%; left: 50%; transform: translate(-50%, -50%); background-color: white; } .unknown_icon::after { content: ""; position: absolute; height: 80%; width: 80%; border-radius: 50%; top: 100%; left: 50%; transform: translate(-50%, -50%); background-color:white; } <div class="item"> <div class="item_img unknown_icon"></div> </div> Pero cuando redimensionas este no mantiene la relación de aspecto como en el anterior con la imagen
¿Cómo soluciono este problema? tal vez con aspect-ratio ?
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
probar
.item_img { position: relative; display: inline-block; width: 100%; height: auto; }
·
Juan Pablo Isaza
Denunciar
0
Utilice aspect-ratio . Aunque sea irregular después de cambiar el tamaño:
.item { display: flex; flex-direction: column; position: absolute; background-color: green; height: 20rem; width: 20rem; min-height: 10rem; min-width: 10rem; resize: both; overflow: hidden; } .item_img { position: relative; display: inline-block; width: 100%; height: 100%; } .unknown_icon { height: 100%; width: 100%; background-color: gray; position: relative; overflow: hidden; } .unknown_icon::before { content: ""; position: absolute; aspect-ratio: 1 / 1; /* here */ width: 35%; border-radius: 50%; top: 30%; left: 50%; transform: translate(-50%, -50%); background-color: white; } .unknown_icon::after { content: ""; position: absolute; aspect-ratio: 1 / 1; /* here */ width: 80%; border-radius: 50%; top: 100%; left: 50%; transform: translate(-50%, -50%); background-color: white; } <div class="item"> <div class="item_img unknown_icon"></div> </div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta