javascript - example - Las imágenes no responden por defecto en Twitter Bootstrap 3?
tooltip bootstrap 4 example (3)
Excelente sugerencia de @BassJobsen, pero usaría display: inline-block; en lugar de display: block; ya que se siente más semántico 1 (lo que significa que puede estar un poco más seguro de que no está arruinando otro lugar).
Entonces, el mío se vería así:
img {
display: inline-block;
height: auto;
max-width: 100%;
}
Por favor, avíseme si mi entendimiento es defectuoso. :)
1 : Por un lado, las imágenes casi siempre se envuelven en un elemento de nivel de bloque si ese es el caso de uso; y nuevamente, también usamos imágenes en elementos como los párrafos ( p ), donde un inline-block sería más apropiado que un elemento de block .
Parece que con la nueva versión 3.0 tengo que establecer los nombres de clase de una imagen en col-lg-4 col-sm-4 col-4 si la imagen es parte de div con los mismos nombres de clase para hacer que la imagen responda con todos los puntos de interrupción
En la versión 2, las propiedades CSS de las imágenes se heredan de forma predeterminada las propiedades div de los padres.
¿Es esto correcto?
Llegué aquí después de tratar de averiguar si es seguro aplicar img-responsive para todas las imágenes.
La respuesta de @its_me me llevó a pensar que no es seguro aplicar esto para imágenes bajo un elemento p .
Esto no parece ser lo que piensa el equipo de bootstrap.
Esta es la razón por la cual las imágenes no responden por defecto en bootstrap3:
El resumen es que rompe una tonelada de widgets de terceros desprevenidos (incluido Google Maps), lo que comprensiblemente no anticipa que las imágenes dentro de ellos sean redimensionadas a la fuerza a otros anchos. Esta es la razón por la cual revertimos el enfoque de Bootstrap v2 de "las imágenes son receptivas por defecto" en Bootstrap v3 a favor de una clase explícita de respuesta .img.
https://github.com/twbs/bootstrap/issues/18178#issuecomment-154180107
Bootstrap 4
Para Bootstrap 4, use Sass (SCSS):
// make images responisve by default
img {
@extend .img-fluid;
}
respuesta actualizada para la versión 3
Bootstrap 3 tiene una clase especial para imágenes receptivas (establece el ancho máximo al 100%). Esta clase se define como:
.img-responsive {
display: block;
height: auto;
max-width: 100%;
}
Nota La etiqueta img se obtiene de manera predeterminada:
img {
vertical-align: middle;
border: 0;
page-break-inside: avoid;
max-width: 100% !important;
}
Entonces use class="img-responsive" para hacer que sus imágenes respondan.
Para que todas las imágenes respondan de manera predeterminada:
CSS: agregue el siguiente código bajo el bootstrap css:
img {
display: block;
height: auto;
max-width: 100%;
}
menos: agregue el siguiente código en su mixins.less:
img {
&:extend(.img-responsive);
}
Nota: requiere Less 1.4.0. ver: https://.com/a/15573240/1596547
Carrusel
Las etiquetas img dentro de un carousel responden por defecto
Reglas semánticas
Ver también la respuesta de @its-me ( https://.com/a/18653778/1596547 ). El uso de lo anterior para hacer que todas sus imágenes respondan de manera predeterminada convierte sus imágenes en elementos de nivel de bloque . Los elementos de nivel de bloque no están permitidos en los párrafos ( <p> ), ver: https://.com/a/4291515/1596547
Por lo que yo entiendo, la distinción entre elementos de nivel de bloque y elementos en línea se reemplaza por un conjunto más complejo de categorías de contenido. Ver también: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente#Inline_vs._block-level . Por lo tanto, en HTML5 la etiqueta ap puede contener cualquier elemento de frase entremezclado con datos de caracteres normales. (ver: http://www.w3.org/TR/html-markup/p.html ) La etiqueta img es un elemento de fraseo. El valor predeterminado de la etiqueta img para la propiedad de visualización es en realidad inline-block . Cambiar la propiedad de visualización a bloquear no infringe ninguna de las reglas anteriores.
Los elementos de nivel de bloque ( display:block ) toman todo el espacio disponible de su elemento primario, que parece exactamente lo que espera para las imágenes receptivas. Así que la display: block; configuración display: block; parece una opción razonable, que debe preferirse por encima de la declaración de inline-block .
Las imágenes dentro de elementos p que requieren inline-block como sugieren @its-me ( https://.com/a/18653778/1596547 ) tal vez no sean receptivas en absoluto.