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

您使用内联样式调整了图像大小;这是主要问题。你可以做两件事：

将宽度和高度添加到floatingimage类 OR
创建一个新类，例如.wh100，宽度：100px;和身高：100px;并在你的html中使用带有.floatingimage的第二个类，例如img class =“floatingimage wh100”

在任一选项中，请记住从html中删除内联样式！

然后你的图像应该适当大小。

给那个旋转

重新编辑:( 回到计算机上 - 叹息.. ）..在这里你去...我刚刚发布的小提琴，标题缩小到75％。

header {
  width: 75%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

#header_title {
  font-weight: bolder;
  text-align: center;
  max-width: 80%;
}

#header_photo {
  /*display: none;*/
  margin: 0;
  padding: 0;
  max-width: 20%;
  height: auto;
  float: right;
}

.floatingimage {
  position: relative;
  display: none;
}

.wh100 {
  width: 100px;
  height: 100px;
}

@media all and (max-width:480px){
  #header_photo {
    margin-top: 8%!important;
}
}

@media all and (max-width:1024px) {
  #header_title,
  #header_photo img {
    margin: 0;
    padding: 0;
    top: 2%;
    display: inline!important;
    vertical-align: middle!important;
  }
  #header_title {
    max-width: 80%;
    position: relative;
    float: left;
  }
  #header_photo {
    margin-top: 4%;
    max-width: 20%;
    position: relative;
    float: right;
  }
  #header_photo img {
    position: relative;
    max-width: 100%;
    height: auto;
  }
}

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

New fiddle

Answer 2

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

HTML code：

<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;
  }
 }

你在小提琴here

上查看

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

2 个答案: