2

Estoy trabajando con bootstrap, y en una pagina web muestro imagenes, resulta que para que se vea bien la imagen en si, tiene que ser 630 x 380.

<img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" />

pero si ingreso otra imagen con dimensiones diferentes, queda muy desproporcionado con el resto del contenido web(los títulos mas arriba o abajo, la descripcion des-posicionada, etc). Pero si coloco las dimensiones fijas:

<img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" height="380" width="630" />

No se desproporciona el contenido web, pero si la foto queda mal, por ejemplo, sino es de la dimensión que ya les mencioné ; la imagen de una persona que mas gorda o delgada.

Me gustaría saber si existía algo que podría arreglar esto, como por ejemplo que corte alguna parte de la imagen para mostrar de forma correcta con la dimensión deseado, o si existe otra solución.

1

7 respuestas 7

4

No hay soluciones perfectas, alguien tendrá que ceder.

Bootstrap tiene la opción .img-responsive pero hará que la imagen se expanda a todo el ancho y extenderá el contenedor verticalmente, lo que posiblemente rompa el texto y demás.

Una forma simple de hacer que una imagen siempre cubra todo el area es utilizando background-size: cover.

Para esto no tienes que utilizar una <img> sino un <div>, y estableciendo estas propiedades (lo puedes hacer por css o el atributo style)

Lo ideal es que lo hagas sobre el <div> contenedor ej:

/* esta es la parte que genera adaptación */
.fondo {
  background: url(http://lorempixel.com/630/380/) no-repeat center center;
  background-size: cover;
}

/* el resto es para demostrarlo */
.igual-relacion {
  width: 630px;
  height: 380px;
}

.aplanado {
  width: 630px;
  height: 180px;
}

.alargado {
  width: 200px;
  height: 500px;
}

h1, p { 
  color: white;
}
<div class="fondo igual-relacion">
  <h1>Igual Relacion de Aspecto</h1>
  <p>Texto interno</p>
</div>
<div class="fondo aplanado">
  <h1>Se adapta aunque este aplanado</h1>
  <p>Pero se recortan partes de las imagenes</p>
</div>
<div class="fondo alargado">
  <h1>La imagen original es menos alta</h1>
  <p>Pero se se adapta bien, auque pierde algo de calidad, te combiene usar imagenes mas grandes que el contenedor.</p>
</div>

Esta técnica deja en manos del browser el ajuste de la imagen, hará que cubra toda la division sin sobrepasarse y buscando la mejor forma de escalarlo (osea a lo ancho o a lo alto) pero la imagen no se vera deformada.

Como dije antes alguien tiene que ceder, con esto tienes que enfrentar que si la relación de aspecto es diferente, partes de la imagen no serán visibles, lo cual es inevitable.

1

si necesitas insertar la imagen en el HTML, una solución simple es crear un contenedor para tu imagen y manejar los tamaños por CSS.

Te dejo un ejemplo con dos imágenes de distinto tamaño:

  • Una vertical de 450 × 600 (px)
  • Otra horizontal de 1247 x 929 (px)

Espero que te ayude.

.img-container{
  width:630px;
  height:380px;
  overflow:hidden;
}
.img-container img{
  width:100%;
  height:auto
}
<div class="img-container">
  <img src="http://joportal.hu/images/news/3fc2302101eccde9b8f57cb13b79e65df0ffcd15.jpg">
</div>
<div class="img-container">
  <img src="http://www.charliechaplin.com/images/film/poster/0000/0002/big_gold_rush_dance_of_the_rolls.jpg">
</div>

1

De bootstrap ni idea, si quieres una imagen de un tamaño especifico manteniendo proporciones y no una imagen dentro un div, siempre puedes crear un CANVAS con la imagen que quieras en el centro. Aquí te dejo dos funciones de ejemplo, la he hecho rapidito así que puede tener fallos... una sin usar CSS y otra con CSS.

    function img2ratio (img,color){
    /*  *****************************************************************
        * img2ratio: Mantiene el ratio de un objeto imagen              *
        *                                                               *
        * Uso: img2ratio (objeto imagen (,color de fondo) );            *
        *   Objeto imagen: objeto <IMG> (usa su src, width y height)    *
        *   Color de fondo: (opcional) color de las "bandas"            *
        * Reemplaza el <IMG> por un <CANVAS>                            *
        * Ejemplo: img2ratio(document.getElementById('foto'),"black");  *
        *****************************************************************   */

    if (!img.complete) {    // Por si no ha terminado de cargar la foto...
        window.setTimeout(function(){img2ratio(img,color);}, 100);
        return;
    }
    var x=img.width;
    var y=img.height;
    var canvas=document.createElement("canvas");
    canvas.height=y;
    canvas.width=x;
    var cnv=canvas.getContext('2d');
    if (color){
        cnv.fillStyle = color;
        cnv.fillRect(0,0,x,y);
    }
    var ratio=img.naturalHeight/img.naturalWidth;
    if (y>x*ratio) cnv.drawImage(img,0,y/2-x*ratio/2,x,x*ratio);
    else cnv.drawImage(img,x/2-y/ratio/2,0,y/ratio,y);
    img.parentNode.replaceChild(canvas,img);
}

function img2ratioCSS (img,color){
    /*  *****************************************************************
        * img2ratio: Mantiene el ratio de un objeto imagen              *
        *                                                               *
        * Uso: img2ratio (objeto imagen (,color de fondo) );            *
        *   Objeto imagen: objeto <IMG> (usa su src, width y height)    *
        *   Color de fondo: (opcional) color de las "bandas"            *
        * Reemplaza el <IMG> por un <CANVAS>                            *
        * Ejemplo: img2ratio(document.getElementById('foto'),"black");  *
        *****************************************************************   */

    if (!img.complete) {    // Por si no ha terminado de cargar la foto...
        window.setTimeout(function(){img2ratio(img,color);}, 100);
        return;
    }
    var x=img.width;
    var y=img.height;
    var obj=document.createElement("canvas");
    if (color) obj.style.backgroundColor=color;
    obj.style.backgroundSize="contain";
    obj.style.backgroundRepeat="no-repeat";
    obj.style.backgroundPosition="center center";
    obj.style.backgroundImage="url('"+img.src+"')";
    obj.height=y;
    obj.width=x;
    img.parentNode.replaceChild(obj,img);
}
0

o incluyes a cada imágen <img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" style="max-width: 100%;height: auto;display:block;" /> o simplemente agregas a todas tus etiqueta la clase .img-responsive <img alt="" src="<%=ResolveUrl("~/img/blog/blog_2.png")%>" class="img-responsive" /> ya que utilizas bootstrap.

Para los recortes tienes .img-rounded, .img-circle, .img-thumbnail. Aquí un ejemplo: http://v4-alpha.getbootstrap.com/content/images/

0

La respuesta de rnrneverdies me parece la más adecuada, sólo habría que recalcar que lo más recomendable es utilizar imágenes de un tamaño igual o poco mayor al espacio en donde se pretende presentar.

Si tu espacio es de 630 de ancho x 380 de alto tienes las siguientes opciones:

  • Servir una imagen de esas mismas medidas y proporciones (ésto sería el caso ideal)
  • Servir una imagen donde el mínimo de ancho sean los 630 o el mínimo de alto sean los 380 y usando background-size escalar la imagen para que se ajuste (contain) o se escale (cover) de manera proporcional.

Si se sirven imágenes más pequeñas que el área, al momento de que el navegador las escale es posible que se vuelvan borrosas o pixeleadas.

Si se sirven imágenes mucho más grandes que el área, el tiempo de descarga aumentará, pues el usuario estará descargando un archivo de imagen más grande de lo necesario.

0

Puedes usar la propiedades de CSS para escalar la imagen de la propiedad backbround-size : cover

Pero recuerda que si usas bootstrap, hay una clase como lo mencionan otros llamada

img-responsive.

saludos.

-2

Yo en situaciones parecidas lo que hago es tirar de algún editor de imagenes, como el gimp, para escalar el tamaño de la imagen al deseado conservando la relación de altura y anchura.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.