css 我无法更改图像大小

dhxwm5r4 于 2023-04-13 发布在其他

关注(0)|答案(2)|浏览(181)

>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>

我会给你看我的HTML和CSS。
我的jpeg图像太大了，我试着改变宽度和高度，但不起作用，我也试过对象适应元素，但也不起作用。我不知道为什么什么都不起作用。可以把一个负数使图像减少例如：宽度：-10像素

css

来源：https://stackoverflow.com/questions/75979238/i-cant-change-the-image-size

2条答案

按热度按时间

xkrw2x1b1#

这真的很简单，记住最后一个应用到元素的样式将占上风，并且hashtag符号应用的样式是在id上实现的。
您可以调试您的风格生活在您的网页浏览器按F12和使用检查器工具。

#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>

以你为榜样

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>

赞(0）回复(0）举报 2023-04-13

blmhpbnm2#

> 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

赞(0）回复(0）举报 2023-04-13

我来回答

css 我无法更改图像大小

2条答案

相关问题

热门标签

最新问答