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?. Commented 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 Commented 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

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.