0

bueno soy nueva en esto la cuestion es que yo hice el menu y la imagen resposive pero a medida que voy achicando la pantalla, la imagen se achica y deja un espacio entre el menu y la imagen HTML

<header>
    <DIV CLASS="container-header"> 
    <DIV CLASS= "container-logo-title">
<img src="imagenes/logo.jpg" class="img-logo">
    <H1>MELAMOBLAMIENTOS</H1></DIV>
 <!--para hacer un icono que se va a activar cuando el tamaño sea muy chico    -->
<input type="checkbox" id="check">
<label for="check" class="icon-menu"></label>
  <!--para hacer un icono que se va a activar cuando el tamaño sea muy chico    -->

<!--con esto hacemos el menu    -->
        <div class="container-menu">
<nav class= "menu">
<ul>
<li><a href="#Inicio">Inicio</a></li>
<li><a href="#Servicios">Servicios</a></li>
<li><a href="#Trabajos">Trabajos</a></li>
<li><a href="#Contacto">Contacto</a></li>
</ul>
</nav>


CSS
*{max-width: 2000px;
}
main{
    position: relative;

}

/*CONTENIDO 1*/
.content-one{
    width: 100%;
    padding-top: 0px;



}

<--{poner imagen de inicio}

.content-portada{

   bottom: 50px;

   width: 100%;


    height:768px;
    background-image: url(../imagenes/a.jpg);


    background-position: center ;
    background-size:100%;
    background-repeat: no-repeat;

}
<--{hacer la imagen adaptable a las dimenciones de la pantalla, }-->
@media screen and (max-width:900px){
    .content-portada{

         height:1200px;

        background-image: url(../imagenes/9.jpg);

        }
    .content-one{
       background-position: 0px,100px;

}

}

.content-item1{
    width: 800px;
    margin: auto;
    text-align: center;
    position: relative;

    margin-right: 5%;
    top: 400px;
}
<--{fuente letra color etc}-->
.content-item1 h3{
    color:white;
    font-size: 60px;
    text-align: center;
}
.content-item1 h4{
    color:white;
    text-align: left;
    font-size: 25px;
    font-weight: 100;
    text-align: center;

}
@media screen and (max-width:800px){
    .content-item1{
        width: 100%;
    }
}

1 respuesta 1

0

Ten presente que los navegadores traen un margin y padding por defecto, para quitarlos puedes utilizar el selector Universal * que hace referencia a todo el documento, agregando margin 0 y padding 0 en tu CSS

EJM:

* { padding:0; margin: 0; }

o puedes utilizar normalize.css que permite el reset de la página correcto.

link: https://necolas.github.io/normalize.css/

--

Para que una imagen sea adaptable según su tamaño Viewport (Tamaño de la página), basta con agregar en tu CSS (width: 100%, max-width: 100%), en la imagen que desea que no se desborde.

De esta forma según sea la escala de tamaño de tu ventana la imagen ira tomando el 100% de su tamaño.

Espero sea de Utilidad.

Img {
   width: 100%;
   max-width: 100%;
}

@media only screen and (max-width: su tamaño en Pixeles) {
   Img 
   {
     width: 100%;
     max-width: 100%;
   }
}

Tu Respuesta

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