Why does the size of a image in my floating element does not change?
Question
I'm currently doing a tutorial on this link . The website is german but just look at the code and the picture above. I'd like to do something similar, with the <div> above the <p> but the size of my image is way larger so I try to make it smaller with width and height but it doesn't work. I can't figure out how to make it fit in that floating element.
Thank you in advance!!
html:
<body>
<h1>Heading 1</h1>
<div id="picture">
<img src="images/picture.jpg" alt="photograph">
</div>
<p>sampletext</p>
</body>
css:
#picture {
float: right;
width: 300px;
height: 200px;
}
1 answers
solution1
1 ACCPTED 2018-10-05 21:27:58
You are defining the size for the container, but not for the image itself, so the image will display at its original size, and since the container doesn't have overflow: hidden , it will go out of the container.
Add this to fit the image into the container (well, height will depend on the image format):
EDIT: I changed height to 100% after the comment, wich distorts the image. If you set it to auto , and also set the container height to auto (or just erase it, since that is the default setting), it will become higher, according to its proportions/format. (The original image in this case is 400x400)
#picture { float: right; width: 300px; height: 200px; } #picture img { width: 100%; height: 100%; }
<body> <h1>Heading 1</h1> <div id="picture"> <img src="https://lorempixel.com/400/400/" alt="photograph" /> </div> <p>sampletext</p> </body>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.