html - 为什么我的图像的高度与宽度无关？

Question

我正在尝试制作一个响应式网站。因此，我得到了一个图像宽度，该宽度由页面的宽度决定，如代码段所示。通常，为了保持宽高比，我只会说:
高度:相对

但是由于某些原因，缩小宽度时高度没有调整..这是为什么？

/* TITLE BLOCK */

.title_block {
  width: 100%;
  min-height: 320px;
  height: auto;
}

.title-block-image {
  width: 100%;
  max-width: 345px;
  height: relative;
  display: block;
  margin: auto;
}

<div id="title_block" name="title_block" class="title_block white">
  <div class="float-left">
    <img src="{ROOT}img/Camerashop24/logo.jpg" alt="logo" style="height: 135px;" class="title-block-image">
  </div>
</div>

对于响应式网站，我使用媒体查询:

@media 屏幕和(最大宽度:1100 像素){

图像的正常设置是这些:

.title_block{
    width: 1100px;
    height: 140px;
    margin: auto;
}

.title-block-image{
    height: 100px;
    width: auto;
}

可能是我必须取消设置 100px 之类的？或者新的 height: auto 应该已经这样做了吗？

Answer 1

正如评论中所说，CSS 中没有 height: relative;。如果你想保存比例你可以保留高度，因为它的默认值是auto 或者如果你之前设置了图像高度，你可以为这个图像设置:height: auto;