Css 无法在容器中正确缩放图像_Css

Css 无法在容器中正确缩放图像

css

Css 无法在容器中正确缩放图像,css,Css,在容器中缩放图像时遇到问题。我有两列，左边的列设置为280px，右边的列取左边的。图像进入右栏-我们事先不知道它的大小（在示例中是947px）如果窗口足够大，则一切正常，但当窗口变小时，图像的大小将强制右栏位于左栏下方。一旦窗口变得足够小，图像最终会缩放到主体 <!DOCTYPE html> <head> <style type='text/css'> @media only screen and ( min-width: 641px ) { /

在容器中缩放图像时遇到问题。我有两列，左边的列设置为280px，右边的列取左边的。图像进入右栏-我们事先不知道它的大小（在示例中是947px）

如果窗口足够大，则一切正常，但当窗口变小时，图像的大小将强制右栏位于左栏下方。一旦窗口变得足够小，图像最终会缩放到主体

<!DOCTYPE html>
<head>
  <style type='text/css'>
    @media only screen and ( min-width: 641px ) { /* 641 or greater */
      img { max-width: 100%; height: auto; display: block; }
      .leftcol  { width: 280px; float: left; outline: 5px dotted green; } 
      .rightcol {               float: left; outline: 5px dotted red;   }
    }
  </style>
</head>

<body>
  <div class="leftcol">
    Home
  </div>
  <div class="rightcol">
    <img src="https://glsmyth.files.wordpress.com/2014/07/a-space-in-time.jpg" alt="Homepage image" />
  </div>
</body>
</html>


@仅媒体屏幕和（最小宽度：641px）{/*641或更大*/
img{最大宽度：100%；高度：自动；显示：块；}
.leftcol{width:280px；float:left；outline:5px点绿色；}
.rightcol{float:左；轮廓：5px点红色；}
}
家

Flexbox是一个很好的解决方案，可以解决您想要实现的目标。通过以下修改，它将按预期工作


@仅介质屏幕和（最小宽度：641px）{
身体{
显示器：flex；
调整项目：灵活启动；
}
img{
最大宽度：100%；
}
leftcol先生{
宽度：280px；
最小宽度：280px；
轮廓：5px点绿色；
}
rightcol先生{
轮廓：5px点红色；
}
}
家

发生了几件事：

Float

无法很好地计算剩余空间，因此您可以在右侧列中使用

calc（100%-280px）

。这确保它始终为100%减去其他列宽：

您的图像仍然需要设置

width:100%

，因为

max width

与图像的实际大小有关：

@仅媒体屏幕和（最小宽度：400px）{
/*641或以上*/
img{
最大宽度：100%；
高度：自动；
显示：块；
宽度：100%；
}
leftcol先生{
宽度：280px；
浮动：左；
轮廓：5px点绿色；
}
rightcol先生{
浮动：左；
轮廓：5px点红色；
宽度：计算（100%-280px）
}
}

家

您还需要在

img

上设置

宽度：100%

<代码>最大宽度：100%与img本机大小相关<代码>宽度相对于包含的元素<代码>img{宽度：100%；最大宽度：100%；高度：自动；显示：块；}只需使用

display:flex

和

flex

属性很好的信息，非常感谢您的帮助。