html - Jousikuva mahtuu 100% Div-korkeudesta ja -leveydestä

original title: "html - Stretch Image to Fit 100% of Div Height and Width"


Translate

I have a div with the following CSS

#mydiv{
    top: 50px;
    left: 50px;
    width: 200px;
    height: 200px;
}

and my HTML looks like this

<div id = "mydiv">
    <img src = "folder/file.jpg" width = "200px" height = "200px">
</div>

I'd like my web image to always be the same size (in a 1:1 aspect ration) no matter what the resolution of the actual image is. If my actual image files are square (with 1:1 ratio) then this isn't a problem. But if the actual image files are not square then the displayed web image do stretch to 100% of both the div's height and width (in this case 200px).

How do I get different image sizes to fit to my DIV?



Minulla on div seuraavan CSS: n kanssa #mydiv {top: 50px; vasen: 50px; leveys: 200px; korkeus: 200px; } ja HTML-koodi näyttää tältä <div id = "mydiv"> <...

Tämä on yhteenveto käännöksen jälkeen. Jos haluat tarkastella koko käännöstä, napsauta käännä-kuvaketta


Kaikki vastaukset
  • Translate

    You're mixing notations. It should be:

    <img src="folder/file.jpg" width="200" height="200">
    

    (note, no px). Or:

    <img src="folder/file.jpg" style="width: 200px; height: 200px;">
    

    (using the style attribute) The style attribute could be replaced with the following CSS:

    #mydiv img {
        width: 200px;
        height: 200px;
    }
    

    or

    #mydiv img {
        width: 100%;
        height: 100%;
    }
    

  • Translate

    Instead of setting absolute widths and heights, you can use percentages:

    #mydiv img {
        height: 100%;
        width: 100%;
    }
    

  • Translate

    Or you can put in the CSS,

    <style>
    div#img {
      background-image: url(“file.png");
      color:yellow (this part doesn't matter;
      height:100%;
      width:100%;
    }
    </style>
    

  • Translate

    will the height attribute stretch the image beyond its native resolution? If I have a image with a height of say 420 pixels, I can't get css to stretch the image beyond the native resolution to fill the height of the viewport.

    I am getting pretty close results with:

     .rightdiv img {
            max-width: 25vw;
            min-height: 100vh;
        }
    

    the 100vh is getting pretty close, with just a few pixels left over at the bottom for some reason.