拉伸图像高度css

Posted 2023-03-06

【中文标题】拉伸图像高度css

【英文标题】：Stretch image height css

【发布时间】：2014-03-10 07:29:21

【问题描述】：

我正在尝试获取两张图片来填充一个单元格。两者都设置为 100% 的宽度，并且水平拉伸是完美的。两者都设置为 50% 的高度，一个是完美的，另一个与单元格重叠并溢出到其下方的单元格中，因为它不会拉伸到我指定的高度，而是基于宽度的比例高度。

http://shears-001-site1.mywindowshosting.com/bet.aspx

如果您看到，底部图像溢出到其下方的单元格。我希望它很好地适应它所在的单元格，我不在乎它是否看起来很有趣。

编辑：似乎问题在于对 div 使用百分比高度。如果使用 em 或像素，它会正确缩放，但百分比会变得很疯狂。

【问题讨论】：

你能分享一些代码吗？还是在jsfiddle中？我认为您的图像高度和宽度与单元格大小无关。谢谢。

请在 img 上添加 clear 和 float as left 并避免 介于两者之间

我这样做了，它仍然和以前一样。它们都是单元格宽度的 100%，但只有一个是单元格高度的 50%。

并避免顶部高度

【参考方案1】：

试试这个代码：

<td style="width: 50%; vertical-align: top;">
  <img src="http://www.jonathanjeter.com/images/Square_200x200.png" style="width: 100%; height: 100%;">
</td>

或在 css

中

img

 width: 100%; height: 100%;

【讨论】：

仍然有问题，现在单元格比指定的长。我不希望单元格拉伸/压缩，只是图像。

【参考方案2】：

你可以这样做

Fiddle

td
    border: 1px solid green;
    position: relative;
    height: 100px;
    width: 200px;


.test
   border-bottom-style: solid; 
   background-color: yellow; 
   width: 100%; 
   height: 50%;    
   position: relative;


img
    position: relative;
    width: 100%; 
    height: 100%;     

【讨论】：

试过这个，它与其他建议的问题相同。单元格被拉伸到一个大小以适应两个图像的比例高度，而不是保持在指定高度并缩小图像。

【参考方案3】：

我认为您的两个图像的高度不同，您遇到了问题...尝试使两个图像的高度相同并且共享 50 %...

【讨论】：

height 属性有什么意义，那么如果我必须竭尽全力确保每个图像在文件系统上的像素大小完全相同？

如果你不想出去然后在 html 中以像素为单位应用高度......我认为在你的情况下，百分比包含一些图像问题......你有两个选项以像素为单位应用高度更改文件中图像的大小