hojas - selectores css

Heredar dimensiones solo si están especificadas en el elemento padre

Question

Estoy desarrollando un montón de elementos personalizados para una API utilizando un polyfill de componentes web y he encontrado un obstáculo.

Uno de los elementos puede contener un elemento <img> o <canvas> . Si no se especifica ninguna dimensión para el elemento personalizado, debe ser el tamaño predeterminado del elemento secundario. Si se especifican una o más dimensiones, deben ser heredadas por el elemento hijo.

Para mi primer esfuerzo, pensé que el valor inherit CSS sería lo suficientemente bueno:

my-el img, my-el canvas {
    width: inherit;
    height: inherit;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
}

Sin embargo, esto no funciona cuando se aplica un porcentaje al ancho o alto de <my-el> . En su lugar, el elemento hijo ocupa el mismo porcentaje de su padre .

He intentado varios otros intentos para encontrar una solución y busqué en todas partes sin éxito. Creo que una solución CSS pura puede ser imposible, pero espero que alguien pueda probar lo contrario.

Para aclarar, el resultado final debe ser que <my-el> comporte como un elemento reemplazado en línea, como si fuera un <img> con sus propias dimensiones internas. Cuando no configura el ancho o el alto de esos elementos, se ajustan por defecto a sus dimensiones internas. Cuando establece el ancho o el alto, eso tiene prioridad y cualquier contenido "interno" se redimensiona en consecuencia. _{(Al menos, espero que se aclare!)}

Answer 1

¿Cómo establecen sus clientes el ancho o el alto en el elemento personalizado? De todos modos, puedes hacer esto:

my-el img, my-el canvas {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

Dice que el img / canvas es tan ancho como su valor predeterminado, pero no más ancho que su padre. Las imágenes mantendrán sus relaciones de aspecto, dejando un espacio vacío debajo de ellas o en el lado derecho, como se puede ver en este violín http://jsfiddle.net/vendruscolo/yrvfz1fw/9/

Si desea que las imágenes se estiren para llenar el espacio disponible, puede hacerlo en este lugar.

my-el img, my-el canvas {
    display: block;
    width: 100%;
    height: 100%;
}

Mientras mida los elementos con porcentajes o con anchos más pequeños, estará bien. Cuando establezca un ancho explícito (más grande) utilizando píxeles, la imagen se detendrá para mantener su relación de aspecto, como puede ver http://jsfiddle.net/vendruscolo/zz6gnytt/2/ En ese caso, si desea mantener el aspecto proporción tendrás que consultar el naturalWidth y el naturalWidth naturalHeight de la imagen y hacer tus propios cálculos para mantener la relación de aspecto.

Answer 2

A menos que malinterprete totalmente sus requisitos, todo lo que necesita es:

my-el {display: inline-block;}

Para asegurarse de que el elemento hijo adopta los atributos del uso principal:

my-el > img,
my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
}

FWIW, probablemente es mejor agregar una clase a su elemento, como un gancho, y adjuntar sus estilos a eso en lugar de apuntar directamente al elemento, por ejemplo:

<myelement class="my-el"><img></myelement>

.my-el {display: inline-block;}

.my-el > img,
.my-el > canvas {
    height: auto;
    max-width: 100%;
    width: 100%;
 }

Si desea que estos estilos se apliquen a cualquier elemento que sea un elemento secundario directo de su elemento primario, simplemente use el selector universal:

.my-el > * {
    height: auto;
    max-width: 100%;
    width: 100%;
 }

Answer 3

Creo que no entiendo la pregunta. Si puede establecer estilos en línea en el img / lienzo, debe ordenarse usando ancho / alto: 100%, ya que estos serán reemplazados por los estilos en línea.

Incluí un JSFiddle donde establecí estilos en línea en uno de los elementos y en los otros dos que llevan los padres.

http://jsfiddle.net/6vygke92/5/

.my-el img, .my-el canvas {    
    display: block; 
    width: 100%;
    height: 100%;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
}

Answer 4

El porcentaje de ancho y alto son relativos al elemento padre, por lo que probablemente solo puedas usar esto, creo.

my-el {
    display: inline-block;
}
my-el img, my-el canvas {
    width: 100%;
    height: 100%;
}

Siéntase libre de jugar configurando cualquier ancho y alto en my-el , vea si funciona para usted.

http://jsfiddle.net/6afdbfck/

Answer 5

Espero que esta vez mi código funcione

my-el {
    width: 50%;
    border: 1px solid silver;
}

my-el img, my-el canvas {
    width: inherit;
    height: inherit;
    max-width: inherit;
    min-width: inherit;
    max-height: inherit;
    min-height: inherit;
    position: relative;
}

<my-el>
  <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png" />
</my-el>

U otra forma de hacerlo

my-el {
  width: 50%;
  border: 1px solid silver;
}
my-el img,
my-el canvas {
  width: inherit;
  height: inherit;
  max-width: inherit;
  min-width: inherit;
  max-height: inherit;
  min-height: inherit;
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
}

<my-el>
  <img src="https://s3-eu-west-1.amazonaws.com/uploads-eu.hipchat.com/214790/1500400/lX8QKASWLAKotii/29e222d6-5828-4c3e-8153-5d5d065e91b1-original.png" />
</my-el>

Espero que esta vez te ayude con una forma fácil, menos código y compatible con todos los navegadores, así como con capacidad de respuesta. También es exactamente perfecto y no muestra el borde de my-el {} . Déjame saber si tienes alguna pregunta.

Answer 6

Podría usar min-width:100% - min-height:100% como alternativa para la situación en la que se asigna un porcentaje de ancho a div padre:

 my-el img, my-el canvas {
   width: inherit;
   height: inherit;
   max-width: inherit;
   min-width:100%;
   max-height: inherit;
   min-height: 100%;
 }

fiddle