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

【问题标题】：Why is the height of my image not relative to the width?为什么我的图像的高度与宽度无关？
【发布时间】：2017-08-10 00:51:41
【问题描述】：

我正在尝试制作一个响应式网站。所以，我有一个图像宽度，其宽度由页面的 with 决定，如 sn-p 所示。通常，为了保持纵横比，我只会说：
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 screen and (max-width: 1100px) {

}

图片的正常设置如下：

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

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

可能是我必须取消设置 100px 还是什么？还是应该新的height: auto 已经这样做了？

【问题讨论】：

css中没有height: relative！
你不能只删除 height: relative，然后添加 height: auto;

标签： html css image responsive

【解决方案1】：

正如 cmets 中所说，css 中没有 height: relative;。如果您想保存口粮，您可以保留高度，因为它的默认值是 auto 或者如果您之前设置了图像高度，您可以为此图像设置：height: auto;

【讨论】：

高度仍然没有调整..我不知道我是怎么想出相对的..但图像仍然是错误的
你删除了height: relative 吗？
如何改变图片的宽度？通过更改浏览器宽度？
你必须在你的图片标签中删除这个：style="height: 135px;"。我第一次没有看到这个。这会覆盖此图像的其他高度样式。
完成了这项工作！谢谢

【解决方案2】：

正如其他人所说，将 height 替换为 auto 以使图像高度正常。另外删除 html 中的 height 属性，因为它会覆盖您的 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>

【讨论】：

【解决方案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>

【讨论】：