html - 自动调整 CSS 中内嵌图像的图像大小

Question

我希望我的内嵌图像能够根据浏览器大小自动调整大小，同时它也应该与标题内嵌。我已经尝试过给出的解决方案 here但它对我不起作用。

这是我的代码:

#header_title {
  font-weight: bolder;
  text-align: center;
}

#header_photo {
  display: none;
}

.floatingimage {
  float: right;
  max-width: 100%;
  height: auto;
}

@media all and (max-width: 1024px) {
  #header_title {
    margin-left: 10%;
    min-width: 67%;
    max-width: 77%;
    display: inline-block;
    vertical-align: top;
    position: relative;
  }
  #header_photo {
    display: inline-block;
    vertical-align: top;
    max-width: 20%;
    height: auto;
  }
}

<header>
  <div id="header_title">
    <h1>Title h1</h1>
    <h3>Title h3</h3>
  </div>
  <aside id="header_photo">
    <img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg" width="100px" height="100px" />
  </aside>
</header>

您可以在 jsfiddle here 上找到此代码.

注意:我使用的是 Firefox 53.0.3(32 位)

Answer 1

我稍微修改了您的 HTML 和 CSS。我添加了与宽度相关的柔性显示和图像高度。

HTML 代码:

<header>
    <div id="header_title">
            <h1>Title h1</h1>
            <h3>Title h3</h3>
    </div>
            <aside id="header_photo">
                <img class="floatingimage" src="http://www.planwallpaper.com/static/images/Awesome-Nature-Background.jpg"/>
            </aside>

CSS 代码:

header {
  display: flex;
}

#header_title
{
  font-weight: bolder;
  text-align: center;
}

#header_photo
{
  display: none;
  max-width: 100%;
  height: auto;
  align-self: center;
}

#header_photo img {
  width: 100%;
  height: auto;
  max-height: 120px;
}

.floatingimage
{
  float: right;
}

@media all and (max-width: 1024px)
{
 #header_title
 {
    margin-left: 10%;
    min-width: 67%;
    max-width: 77%;
    display: inline-block;
    vertical-align: top;
    position: relative;
 }

  #header_photo
  {
    display: inline-block;
    vertical-align: top;
    max-width: 20%;
    height: auto;
  }
 }

你用 fiddle 检查一下 here