Question 42875 in Html Question posted in
Some basic documentation can be found here.

I can't change the image size – Html

    >my css
       
        body {
          background-color: rgb(52, 51, 51);

          text-decoration-color: aliceblue;

          font-family: Georgia, 
          "Times New Roman", Times, serif;
          text-transform: uppercase;

          font-weight: bold;
        }

        li {
          float: left;
          list-style-type: none;

          padding: 10px;
          display: block;
          width: 90%;
        }

        #images {
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 5px;
          width: 10%;
          height: auto;
          max-width: 50%;
          object-fit: contain;
        }
      >my html
   <html>
     <!DOCTYPE html>
      <html lang="en-US">
       <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="candy fruit mushrooms" />
        <meta name="author" content="MelL" />
        <meta name="keywords" content="candy, fruit, mushroom" />
        <link rel="stylesheet" type="text/css" href="camera.css" />
        <title>photoshop</title>
      </head>

    <body>
      <hearder>
        <h1>CAMERA</h1>
        <nav>
          <ul>
            <li>About</li>
            <li>Contact</li>
        
           </ul>
         </nav>
         </hearder>
        <main>
        <h2>RESENT</h2>
          <p>
      slice of fat, kjfjngknklgj jvnbjhvhnn jhnhnjhnjhnjnhjhnbjbnj
      ngjnkjgntfjngjtnjknjgnjjnjkjbnjkbjnjjnbjgnjnjknjkynjnjnjnjn
      htjftgjtfnjkntjnjnjnkjgynkjnjknkjnjknjnjknjhjkjkhjkhjkgnbjn
          </p>
          <div id="images">
            <img src="./photos/cracked.jpg" alt="" />
            <img src="./photos/cup.jpg" alt="" />
            <img src="./photos/boss.jpg" alt />
            <img src="./photos/eagly.jpg" alt="" />
            <img src="./photos/dark.jpg" alt="" />
            <img src="./photos/freeway.jpg" alt="" />
            <img src="./photos/hiway-1.jpg" alt="" />
            <img src="./photos/hiway-2.jpg" alt="" />
            <img src="./photos/hiway-3.jpg" alt="" />
            <img src="./photos/jamel.jpg" alt="" />
            <img src="./photos/headphone.jpg" alt="" />
            <img src="./photos/momma.jpg" alt="" />
            <img src="./photos/nervous.jpg" alt="" />
            <img src="./photos/throwup.jpg" alt="" />
            <img src="./photos/shirt.jpg" alt="" />
            <img src="./photos/room.jpg" alt="" />
            <img src="./photos/portrait.jpg" alt="" />
           </div>
          </main>

         <footer>
          <nav>
           <ul>
             <li>instagram</li>
             <li>facebook</li>
             <li>e-mail</li>
             <li>Contact</li>
             <li>about</li>
        
           </ul>
         </nav>
         </footer>
        </body>
        </html>
        </html>

I’ll show you my html, and css.

My jpeg images are way to, big, and I tried to change the width, and height, but it didn’t work I also tried object-fit element, but it didn’t work either. I don’t know why nothings working.
could putting a negative symbol make the image decrease for example: width: -10px

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0 
                                 > So to object-fit the images you need to make a div element with its own class, and then an img with its own class. I didn't know that at first that's why I struggled to make the object-fit work on my images.
                    >html
                            <div class="box">
                                 <img class="images" 
                                  src="./photos/cracked.jpg" alt="" />
                            </div>
                 
                      >css
                               .box{

                                    background-color: #ddd;
                                    width: 50px;
                                    padding: 3rem;


                                   }



                              .images {

                                  border: 1px solid #ddd;
                                  border-radius: 4px;
                                  object-fit: cover;
                                  width: 30px;
                                  height: auto;

                                      }
                             >Thanks me

  2. 0

    It’s really simple, remember that the last style applied to your element will prevail, and that styles applied by hashtag symbol are implemented over id’s.

    You can debug your styles live in your web browser pressing F12 and using inspector tool.

    #images
{ 
  max-height: 10%; 
  max-width: 20%;
}
    <html>
<img id=images src="https://media.istockphoto.com/id/1198272365/es/foto/objeto-ondulado-colorido.jpg?s=1024x1024&w=is&k=20&c=cI1p1k0jRzDSJ2tLpWVqzy6xlSmx9pOf2YyaudwBaS4=">
</html>

    With your example would be

            li {
          float: left;
          list-style-type: none;

          padding: 10px;
          display: block;
          width: 90%;
        }

        .images {
          border: 1px solid #ddd;
          border-radius: 4px;
          padding: 5px;
          width: 10%;
          height: auto;
          max-width: 50%;
          object-fit: contain;
        }
    <html>
     <!DOCTYPE html>
      <html lang="en-US">
       <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta name="description" content="candy fruit mushrooms" />
        <meta name="author" content="MelL" />
        <meta name="keywords" content="candy, fruit, mushroom" />
        <link rel="stylesheet" type="text/css" href="camera.css" />
        <title>photoshop</title>
      </head>

    <body>
      <hearder>
        <h1>CAMERA</h1>
        <nav>
          <ul>
            <li>About</li>
            <li>Contact</li>
        
           </ul>
         </nav>
         </hearder>
        <main>
        <h2>RESENT</h2>
          <p>
      slice of fat, kjfjngknklgj jvnbjhvhnn jhnhnjhnjhnjnhjhnbjbnj
      ngjnkjgntfjngjtnjknjgnjjnjkjbnjkbjnjjnbjgnjnjknjkynjnjnjnjn
      htjftgjtfnjkntjnjnjnkjgynkjnjknkjnjknjnjknjhjkjkhjkhjkgnbjn
          </p>
          <div id="images">
            <img class=images src="https://media.istockphoto.com/id/1170732816/es/foto/estructura-de-conexi%C3%B3n-digital-geom%C3%A9trica-del-ordenador-antecedentes-de-tecnolog%C3%ADa-de.jpg?s=612x612&w=is&k=20&c=oJ2FmdaXK-hF7m78QbzC_wOJARrJfrsEIgwrxpAjoG8=" alt="" />
            <img class=images src="https://media.istockphoto.com/id/1366645360/es/vector/imagen-abstracta-brillante-en-un-estilo-moderno.webp?s=612x612&w=is&k=20&c=tSNezIG_QdD_vsfdSU66TX6G9Rpf40-O_tYhi87O2-c=" alt="" />
            <img class=images src="https://media.istockphoto.com/id/1170732816/es/foto/estructura-de-conexi%C3%B3n-digital-geom%C3%A9trica-del-ordenador-antecedentes-de-tecnolog%C3%ADa-de.jpg?s=612x612&w=is&k=20&c=oJ2FmdaXK-hF7m78QbzC_wOJARrJfrsEIgwrxpAjoG8=" alt />
            <img class=images src="https://media.istockphoto.com/id/1366645360/es/vector/imagen-abstracta-brillante-en-un-estilo-moderno.webp?s=612x612&w=is&k=20&c=tSNezIG_QdD_vsfdSU66TX6G9Rpf40-O_tYhi87O2-c=" alt="" />       
           </div>
          </main>

         <footer>
          <nav>
           <ul>
             <li>instagram</li>
             <li>facebook</li>
             <li>e-mail</li>
             <li>Contact</li>
             <li>about</li>
        
           </ul>
         </nav>
         </footer>
        </body>
        </html>
        </html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search