如果外部 div 大小的宽度和高度未定义，如何使用 CSS 缩小图像大小？答案

【问题标题】：How to shrink image size with CSS if its outer div size width and height is undefined?如果外部 div 大小的宽度和高度未定义，如何使用 CSS 缩小图像大小？
【发布时间】：2023-04-04 05:37:01
【问题描述】：

<div class="vid-thumb-lg">
   <div class="vid-thumb">
      <img src="./images/hqdefault.jpg"> 
   </div>
</div>

Vid-thumb-lg: 是我的 img 及其内联标题的父 div

Vid-thumb: 是实际包含图像的 div

我想在不设置父 div 的宽度/高度的情况下拉伸图像大小。我使用了以下 CSS 代码：

.vid-thumb {
    float: left;
    border: 1px solid #333;
    position: relative;
    overflow: hidden;
    background: #f1f1f1;
    vertical-align: middle;
    display: inline;
}

.vid-thumb img {
    margin-top: -46px;
    overflow: hidden;
    position: relative;
}

但静止图像尺寸较大，我需要将图像从左、右、下缩小。

【问题讨论】：

除非我遗漏了什么，听起来你只需要直接使用 CSS 中的 width 和 height 规则来设置图像的大小。这不是你想要的吗？
如果您希望图像更大或更小，您必须设置图像的宽度和高度。我不确定您想要什么结果，因为我看不到示例。如果您不在 css 中设置，肯定图像将具有原始大小。
我已经解决了这个查询，只是给 img 提供了宽度和高度。 :)

标签： html image css

【解决方案1】：

你需要设置容器的宽度和高度，或者是第一个容器vid-thumb-lg的尺寸。

然后，如果您不想使用精确的 px 大小，请使用百分比。装满容器 =

width: 100%;
height: 100%;

相反，如果您在谈论 div 底部的那个小空间.. 是默认情况下在 div 中具有的不可见空白空间。您可以使用以下方法将其删除：

div {
line-height: 0;
}

你的意思是这样吗？

http://jsfiddle.net/x59zLtn8/2/

【讨论】：

我已经解决了这个查询，只是给 img 提供了宽度和高度。 :)