根据宽度和高度将图像合成到div

Question

我想把图像融入div。但不知何故，图像不合适。看一下名为node2

的div

我已将下面的属性设置为图像

img {
   max-width: 100%;
   max-height: 100%;

}

这是我的Fiddle

Answer 1

请尝试使用常规：

，而不是使用最大高度和宽度

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

我在你的小提琴中也注意到，在CSS下你有以下几点：

object-fit: contain;

你也需要删除它。

两者都会在整个div上纵向和横向拉伸图像。

Answer 2

我认为你需要这个：

img {
  float: left;
  object-fit: fill;
  width: 100%;
}

如果你不想拉伸你的图像，那么请添加以下css：

#node2 {
  height: auto;
  width: 255px;
}

请在此处找到fiddle demo 。

Answer 3

如果你想要它100％x 100％那么，把它作为div的背景图片：

div{
    background-image: url('../images/yourimage.jpg');
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
}