0

Estoy haciendo el cuarpo de un email, y quiero poner un encabezado como imagen, el codigo lo tengo asi:

<div style="width:100%">
    <img src="img/encabezado12.jpg" width="100%"  >
    <p style="font-family: Constantia, serif; font-size:17px; ">Con base al requerimiento </p>
    <img src="img/pie_pag.jpg" width="100%">
</div>

Resulta ser que si quito el Width, la imagen sale correctamente, sin verse borrosa, pero si le dejo el width, sale borrosa o mas bien pixelada, alguna sugerencia en que hacer? si le quito el width ya no seria responsive y esa es la idea.

2

1 respuesta 1

1

Debido a que es imposible que quede perfecto por la relación de aspecto, algunas partes no quedarán visibles...pero es inevitable.

Lo que considero mejor para hacer es, que para que la imagen cubra todo, usar backgroung-size: cover. Para ello debes usar un div y no una img. Además usar las siguientes propiedades. Lo puedes hacer desde con style en el html o añades una clase y lo pones en el css.

Te muestro un ejemplo:

.fondo {
  background: url(http://lorempixel.com/630/380/) no-repeat center center;
  background-size: cover;
  height: 380px;
}

/* No hace falta añadirle width porque con el bacground-size de arriba ya cubre todo. El height lo puedes regular para la altura que desees. En este caso lo deje de la altura original de la foto */
<div class="fondo">

Esta es una de las mejores formas de escalar la imagen sin que la deforme. Espero que te sirva de ayuda. Cualquier cosa no dudes en preguntar.

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.