Html 为什么浮动元素中的图像大小不变？
我目前正在做这方面的教程。 该网站是德国的，但只要看看上面的代码和图片。 我想做一些类似的事情，在Html 为什么浮动元素中的图像大小不变？,html,css,Html,Css,我目前正在做这方面的教程。 该网站是德国的，但只要看看上面的代码和图片。 我想做一些类似的事情，在上方的上，但是我的图像的大小要大得多，所以我尝试用宽度和高度使它变小，但它不起作用。 我想不出如何把它放进那个浮动的元素里 提前谢谢你 html: 您正在定义容器的大小，而不是图像本身的大小，因此图像将以其原始大小显示，并且由于容器没有溢出：隐藏，因此图像将从容器中移出 添加此选项以将图像放入容器中（嗯，高度将取决于图像格式）： 编辑：我在评论后将height更改为100%，这会扭曲图像。如果将其设
上方的
上，但是我的图像的大小要大得多，所以我尝试用宽度和高度使它变小，但它不起作用。
我想不出如何把它放进那个浮动的元素里
提前谢谢你
html:
您正在定义容器的大小，而不是图像本身的大小，因此图像将以其原始大小显示，并且由于容器没有溢出：隐藏，因此图像将从容器中移出
添加此选项以将图像放入容器中（嗯，高度将取决于图像格式）：
编辑：我在评论后将height
更改为100%，这会扭曲图像。如果将其设置为auto
，并将容器height
设置为auto（或仅将其删除，因为这是默认设置），则它将根据其比例/格式变得更高。（本例中的原始图像为400x400）
#图片{
浮动：对；
宽度：300px；
高度：200px；
}
#图像img{
宽度：100%；
身高：100%；
}
标题1
样本文本
请输入您当前的代码：）我已在上面添加了它。这是解决我问题的一种方法。但正如你所说，这取决于图像的格式。我试过这个，也只是用height:200px。有没有办法缩小图像，使其完全可见？@Hip将其用作背景图像您只需使用height:100%
，但如果图像格式不同，则会扭曲图像。我只需从容器中删除高度设置，然后高度将根据图像比例进行调整。@johannes当我尝试此操作时，我只得到相同的结果。它只是图片的左边，其余的都被剪掉了。@Temaniaf如果我找到了使用背景的方法的话。谢谢你，伙计！
<body>
<h1>Heading 1</h1>
<div id="picture">
<img src="images/picture.jpg" alt="photograph">
</div>
<p>sampletext</p>
</body>
#picture {
float: right;
width: 300px;
height: 200px;
}