0

Buen día, el problema que tengo es que quiero que una imagen tome las dimensiones de un contenedor sin perder calidad y que se vea completa. Esta es la imagen original:

Y este es el codigo:

<section class="hero">
    <div class="contenido-hero">
        <h2 class="titulo">Diseño y Desarrollo Web <span>Freelancer</span></h2>

        <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-map-pin" width="88" height="88" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffc107" fill="none" stroke-linecap="round" stroke-linejoin="round">
            <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
            <circle cx="12" cy="11" r="3" />
            <path d="M17.657 16.657l-4.243 4.243a2 2 0 0 1 -2.827 0l-4.244 -4.243a8 8 0 1 1 11.314 0z" />
          </svg>
        <p>Santa fe, Rafaela </p>

        <a href="#">Contactar</a>
    </div>

</section>

.hero
    {
        background-image: url(../img/heroo.jpg);
        background-repeat: no-repeat;
        background-size: cover;
    }
2
  • Bienvenido a StackOverflow Naik!, para que sea más fácil ayudarte agrega el código como texto y no una imagen. Puedes leer ¿Cómo elaboro una buena pregunta?. el 31 jul. 2021 a las 5:29
  • El código debe ir en formato texto y no en imagen, por favor edita tu pregunta haciendo clic en editar. Saludos el 31 jul. 2021 a las 6:31

2 respuestas 2

0

Si el navegador tiene que amopliar una imagen va a perder calidad si o si (salvo las SVG). Solución: emplea una imagen suficientemente grande como para que el navegador no tenga que ampliarla sino reducirla de tamaño para ajustarla al contenedor.
Lo que has usado para background-size: cover es correcto si quieres que la imagen de fondo cubra todo el contenedor donde está situada. Si es necesario reducirá y recortará lo que sobre.
La otra opción para background-size: contanin puedes usara la asegurarte de que se ve toda la imagen.
Y la última opción sería poner a la imagen un style con width=100%, con lo que la imagen ocupará el ancho total del contenedor y el alto correspondiente. Pero esto creo que no es lo que buscas.

0
0

Con el código anterior se ve así:

.hero
{

 background-image: url(../img/heroo.jpg);
    
 background-repeat: no-repeat;
    
 background-size: cover;

} introducir la descripción de la imagen aquí

Y se ve así con el background-size: contain;

introducir la descripción de la imagen aquí

Aunque le aplique un width de 100% se ve igual y ya probé con otras imágenes, cambiarle las dimensiones pero se termina viendo mal la imagen. Yo quisiera que se viera toda la imagen completa cuando la estiro a lo ancho y largo

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.