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

Question

<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 的宽度/高度的情况下拉伸(stretch)图像大小。我使用了以下 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;
}

但是图片还是比较大，我需要把图片缩小到，左，右，下。

Answer 1

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

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

width: 100%;
height: 100%;

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

div {
line-height: 0;
}

你是说这样吗？

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