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.

1
  • Claro, porque si aumentas una imagen, pierde calidad. Por eso se ve borrosa cuando tienes el width puesto y cuando lo quitas, la imagen se ve nítida. el 19 nov. 2021 a las 9:48

1 respuesta 1

0

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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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