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

Question

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

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

/* 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;

Answer 2

正如其他人所说，将高度替换为auto，以使图像高度正常。此外，删除 html 中的高度属性，因为它覆盖了 css。

/* TITLE BLOCrelative;K */

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

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

<div id="title_block" name="title_block" class="title_block white">
  <div class="float-left">
    <img src="http://i.imgur.com/AoYz4Sw.jpg" alt="logo" class="title-block-image">
  </div>
</div>

Answer 3

css中没有height: relative。但是有auto.

你应该做的是

CSS:

/* TITLE BLOCK */

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

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

并且在HTML

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

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

Why is the height of my image not relative to the width?

html

css

image

responsive