Problemas con el tamaño de las imágenes
flexi2202
Mensajes publicados
3640
Fecha de registro
Estado
Miembro
Última intervención
-
flexi2202 Mensajes publicados 3640 Fecha de registro Estado Miembro Última intervención -
flexi2202 Mensajes publicados 3640 Fecha de registro Estado Miembro Última intervención -
hola a todos
siempre tengo que arrancarme los pelos con las imágenes en bootstrap
aquí está mi problema
estoy intentando crear algo de lo más banal como una cuadrícula con imágenes
pero no logro integrar mis imágenes con sus verdaderas dimensiones
aquí hay un ejemplo
https://codepen.io/flexi2202/pen/XWMGrqV
la primera imagen está contenida en mi cuadrícula con un estilo de "w100", así que debería ocupar el 100%
la segunda ha sido colocada fuera de la cuadrícula
aclaro que es la misma imagen
y aquí está la imagen reducida que obtengo en línea con el software de Adobe que utilizo
no entiendo cómo, con una imagen de este tamaño, puedo obtener imágenes tan grandes en mi archivo
normalmente debería tener una imagen de
Ancho 107 px
Altura 81 px
siempre tengo que arrancarme los pelos con las imágenes en bootstrap
aquí está mi problema
estoy intentando crear algo de lo más banal como una cuadrícula con imágenes
pero no logro integrar mis imágenes con sus verdaderas dimensiones
aquí hay un ejemplo
https://codepen.io/flexi2202/pen/XWMGrqV
la primera imagen está contenida en mi cuadrícula con un estilo de "w100", así que debería ocupar el 100%
la segunda ha sido colocada fuera de la cuadrícula
aclaro que es la misma imagen
y aquí está la imagen reducida que obtengo en línea con el software de Adobe que utilizo
no entiendo cómo, con una imagen de este tamaño, puedo obtener imágenes tan grandes en mi archivo
normalmente debería tener una imagen de
Ancho 107 px
Altura 81 px
6 respuestas
-
Si tomo 5 imágenes diferentes a las que les doy la misma dimensión en altura con este software en línea y luego quiero mostrarlas en HTML, las alturas no son las mismas.
-
Creo que hay que añadir esto
img{ height:350px; width:100%; } -
Hola,
Si aplicas un width: 100%; en css a tu imagen, esta tomará todo el ancho de su contenedor.
Si quieres que tu imagen tenga el tamaño de tu archivo fuente, normalmente basta con no especificar un ancho en css o, si es necesario, especificar el valor por defecto width: auto; que se adapta al contenido.
https://jsfiddle.net/eqLa3zc2/ -
hola
gracias por la respuesta y el archivo
sí, con una imagen funciona
pero, ¿cómo hacer si tengo por ejemplo 3 imágenes de dimensiones diferentes?
por ejemplo
imagen 1 una altura de 250 y un ancho de 300
imagen 2 una altura de 350 y un ancho de 400
imagen 3 una altura de 400 y un ancho de 400
quiero que las 3 imágenes puedan tener, por ejemplo, una altura de 250-
Sin deformar las imágenes, al menos 2 soluciones posibles según cómo desees mostrar las imágenes en la cuadrícula de bootstrap:
1. Contener la imagen en la columna (contain): la imagen no se recorta, pero habrá espacio vacío en la columna que contiene la imagen según el ancho de la columna y el tamaño de la imagen.
Para ello, basta con aplicar la propiedad max-height en las etiquetas img con la altura máxima de las imágenes.
2. Cubrir la imagen en la columna (cover): la imagen se muestra en todo el ancho de la columna, pero si las proporciones de la imagen y de la columna son diferentes, la imagen se recortará para no deformarse.
Para ello, lo más sencillo es reemplazar la etiqueta img por una etiqueta div y utilizar las propiedades css de fondo para mostrar la imagen (background-image, background-size, background-position, etc...). También aplicamos una altura con la propiedad height para esta etiqueta div, no es necesario definir el ancho ya que ocupa por defecto todo el ancho de la columna.
Ejemplo: https://codepen.io/Pitet/pen/zYZbBQg -
" deseo que las 3 imágenes puedan tener por ejemplo una altura de 250 "
Respuesta simple:
img{ height:350px; }
Pero bueno, no es muy responsive = error de visualización (también llamado bug) en la mayoría de los casos. Para eso hay que usar una unidad diferente al píxel y no buscar tener valores fijos (como 350 px que no corresponde a una pantalla que tendrá 480px de altura).
Además, ¿por qué 350px? Si se basa en su pantalla, eso implica que todos los usuarios de su sitio deben tener la misma pantalla que usted y el mismo espacio ocupado por las barras de navegación de su navegador, el mismo tamaño de ventana ...
en fin, no es bueno intentar forzar un tamaño fijo. Revise todo en escalar, esa es la gran ventaja de Bootstrap: ya lo hace.
-
-
buenas noches
gracias por la respuesta
y sobre todo por la explicación
voy a analizar eso con calma porque por el momento tengo otro pequeño problema con Bootstrap y el responsive
vuelvo más tarde-
Lo mejor es pensar en CSS antes que nada. Bootstrap es una implementación de CSS con JavaScript y clases y modelos (la cuadrícula de 12 columnas) ya hechos.
Así que si reflexionas primero sobre CSS, tendrás más fácilmente la respuesta.
Aquí es simple: un ancho del 100% para una imagen significa que la imagen ocupa el 100% del espacio disponible (y la altura será proporcional al ancho si no se indica dentro del límite del espacio disponible también).
Lo demás fluye naturalmente una vez que hayas asimilado esto:
Bootstrap o no, se trata de la propiedad CSS "width" de la que se habla, así que:
https://developer.mozilla.org/fr/docs/Web/CSS/width
-
-
hola Tcaro
gracias por esta explicación adicional
gracias a usted entiendo mejor todo esto y finalmente he logrado resolver el problema del tamaño de mis imágenes
muchas gracias de nuevo por esta ayuda