Bienvenido a datoweb.com!! En este foro podrás encontrar ayuda sobre diseño y desarrollo web en general. Si quieres formar parte de esta comunidad para pedir ayuda o colaborar ayudando a otros usuarios del foro solo tienes que registrarte desde el siguiente enlace: Registrarse en el Foro

Redimensionar imagenes en html

Hola amigos que tal esta.
Miren lo que me pasa es que estoy usando bootstrap 3 y cuando pongo una imagen y le aplico la clase img-responsive (max-width: 100%; height: auto;) no me permite redimensionar la imagen al tamaño que necesito.

Por ejemplo necesito que la imagen ocupe 1200px de ancho y 450 de alto por ejemplo entonces al insertar la image en el html de la siguiente manera:

<img src="img/marketingdigital3.jpg" class="img-responsive" height="450" width="1200" alt="">

no se respeta el tamaño solicitado si la imagen guardada en la carpeta de imagenes es superior a ese tamaño. y en mi caso requiero que la imagen original sea superior ya que en una pagina de detalle se mostrara la misma imagen pero mas grande.

Espero me ayuden con este tema.
Saludos y gracias.

5
Puntos
22768
Visitas
8
Resp
Por poxipol hace 114 meses
Principiante
Respuesta #1
hola, puedes probar agregando las propiedades que te dejo a continuación a la clase .img-responsive:
<style type="text/css">
.img-responsive {
	width:1200px !important;
	height:450px !important;
}
</style>
o también puedes probar con un style directamente en la imagen:
<img src="img/marketingdigital3.jpg" class="img-responsive" style="width:1200px !important; height:450px !important" alt="">
espero que te sirva de ayuda aunque nunca utilice bootstrap todo hay que decirlo
0
Puntos
Por alber hace 114 meses
Administrador
Respuesta #2
¿Qué pasaría si en el width y el height le colocas "px"? No se, por curiosidad. ¿No funcionaría así?
<img src="img/marketingdigital3.jpg" class="img-responsive" height="450px" width="1200px" alt="">
0
Puntos
Por Jose hace 114 meses
Experto Sitio web
Respuesta #3
Jose dijo:
¿Qué pasaría si en el width y el height le colocas "px"? No se, por curiosidad. ¿No funcionaría así?
<img src="img/marketingdigital3.jpg" class="img-responsive" height="450px" width="1200px" alt="">
Lo eh probado varias veces y no funciona , pasa igual con las tablas no admites px sino un numerico sin el px
0
Puntos
Por alber hace 114 meses
Administrador
Respuesta #4
alber dijo:
Jose dijo:
¿Qué pasaría si en el width y el height le colocas "px"? No se, por curiosidad. ¿No funcionaría así?
<img src="img/marketingdigital3.jpg" class="img-responsive" height="450px" width="1200px" alt="">
Lo eh probado varias veces y no funciona , pasa igual con las tablas no admites px sino un numerico sin el px
Ah bien, creí que tendría que ver con eso pero veo que no.
Otra de las cosas podría ser que si está metiendo esa imagen dentro de un div, debe chequear que el div tenga mayor dimensión que la imagen, porque si no le tomará el máximo como dice la clase img-responsive.

alber aunque tu idea está bien, la clase img-responsive es genérica. O sea que sirva para toda imagen. Colocarle esos números creo que la hace menos genérica. O sea, solo servirá para esa imagen ¿no?

Habrá que ver que nos dice poxipol.
0
Puntos
Por Jose hace 114 meses
Experto Sitio web
Respuesta #5
Jose dijo:
alber dijo:
Jose dijo:
¿Qué pasaría si en el width y el height le colocas "px"? No se, por curiosidad. ¿No funcionaría así?
<img src="img/marketingdigital3.jpg" class="img-responsive" height="450px" width="1200px" alt="">
Lo eh probado varias veces y no funciona , pasa igual con las tablas no admites px sino un numerico sin el px
Ah bien, creí que tendría que ver con eso pero veo que no.
Otra de las cosas podría ser que si está metiendo esa imagen dentro de un div, debe chequear que el div tenga mayor dimensión que la imagen, porque si no le tomará el máximo como dice la clase img-responsive.

alber aunque tu idea está bien, la clase img-responsive es genérica. O sea que sirva para toda imagen. Colocarle esos números creo que la hace menos genérica. O sea, solo servirá para esa imagen ¿no?

Habrá que ver que nos dice poxipol.
Si lo metes directamente en la imagen (img) si pero si modificas la clase en el css en teoria tiene que funcionar aplicando la propiedad !important es cuestion de probar
0
Puntos
Por alber hace 114 meses
Administrador
Respuesta #6
ya lo tengo, hay que crear un estilo que diga que el ancho maximo sea del 100% pero no hay que permitir que el alto lo calcule el navegador por defecto, hya que ponerlo en px. y hay funciona muy bien.

El problema es que cada vez que tienes que poner imagenes con diferente altura tienes que crear un estilo nuevo.
Pero bueno una cosa por otra.
Saludos y gracias
0
Puntos
Por poxipol hace 114 meses
Principiante
Respuesta #7
Bueno, bien que hayas dado con una solución. Aunque sobre lo que dices de la altura, normalmente cuando colocas un width, el height:auto queda en base a ese width, y se debería ver bien..
0
Puntos
Por Jose hace 114 meses
Experto Sitio web
Respuesta #8
Efectivamente jose. el alto se calcula de forma proporcional al ancho, pero cuando trabajas el ancho con max-width en %, te permite manipular el alto en px, es bastante mala la solucion que da bootstrap para el tema de las imagenes responsive, pero si lo piensas detenidamente es mas o menos lo mismo que tienes que hacer cuando los css los escribes tu a mano.
Pero bueno sera no mas.
Saludos
0
Puntos
Por poxipol hace 113 meses
Principiante
Compartir en facebook
Compartir en twitter
Compartir
Para comentar Inicia sesión o Registrate