En el siguiente ejemplo, el círculo se adapta al ancho de la cuadrícula y mantiene su relación de aspecto. A medida que el ancho del contenedor se reduce, los círculos se reducen con él ...
Sin embargo, cuando la altura es menor que el ancho (segundo recuadro), el círculo no se contrae solapando fuera de la cuadrícula. ¿Hay alguna manera de que también se adapte a la altura manteniendo la relación de aspecto?
.container {
display: grid;
background-color: greenyellow;
margin: 5px;
min-height: 10px;
min-width: 10px;
}
.portrait {
max-height: 100px;
max-width: 200px;
}
.landscape {
max-height: 200px;
max-width: 100px;
}
.aspect-ratio {
grid-column: 1;
grid-row: 1;
background-color: deeppink;
border-radius: 50%;
align-self: center;
justify-self: center;
}<div class="container landscape">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>
<div class="container portrait">
<svg class="aspect-ratio" viewBox="0 0 1 1"></svg>
</div>El resultado debería verse así:
Respuestas:
Después de jugar un tiempo con este problema, pensé que no era un problema con el diseño de la cuadrícula.
Como nunca define altura / altura máxima o ancho / ancho máximo para su SVG, lo que se calcula es
width:autoyheight:autoNota: menciono max-height / max-width ya que estos tendrían prioridad sobre los valores de ancho / alto .
Ahora bien, ¿por qué funciona su diseño de paisaje y su diseño de retrato no funciona? Porque el ancho "tiene prioridad" sobre su altura.
Fuente: ¿por qué ancho: auto se comporta de manera diferente que altura: auto?
Esto significa que su SVG está tomando el
widthde su contenedor y elheightde sus descendientes.En su ejemplo, su SVG no tiene descendientes, pero tiene un padre con un definido ancho máximo . Pero, ¿qué significa esto para la altura del SVG ?
El SVG está calculando su altura a través de la relación intrínseca:
Fuente
Y tu relación intrínseca es 1/1 = 1
Entonces estás forzando tu
height=widthLas soluciones)
La solución es establecer una
widtho unamargina su SVG en función de la proporción de su padre div.En el ejemplo que dio, tiene una proporción de 2: 1, por lo que su SVG debería tener
width:50%omargin: 0 25%.Esto significa que si desea establecer una proporción diferente, debe ajustar en consecuencia (vea el retrato 1-3 en el código a continuación).
Se podría evitar establecer una regla CSS para cada proporción si
heightno es una restricción, ya que podría definir unwidthpara su SVG y contenedor, permitiendo que los elementos ajusten elheightpara mantener su relación de aspecto.También he agregado el último ejemplo si a alguien no le importa mantener la relación de aspecto, pero necesita contener el SVG en un conjunto
heightywidthcontenedor.Tenga en cuenta que no soy muy competente trabajando con SVG y esta respuesta es el resultado de la investigación y mucha experimentación. Estaré encantado de recibir cualquier ajuste y / o corrección a mi respuesta.
fuente
Agregue al contenedor altura y ancho específicos junto con max-height y max-width.
Las unidades vw y vh se pueden usar para hacer este diseño más flexible.
De esta forma, es posible establecer
max-width: 100%; max-height: 100%;el svg y no se superpondrá.-EDITAR-
Dado que el cuadro de vista svg ya está renderizado con la relación de aspecto correcta, es seguro mover el fondo svg dentro del mismo svg para obtener el resultado esperado: una etiqueta de ciclo hará el truco.
¿Es posible imitar el radio del borde con otra etiqueta circular dentro de una máscara?
Todos los demás elementos del svg deben colocarse dentro de un grupo enmascarado. es decir:
<g mask="url(#mask)">fuente