Html 自动调整CSS中内联图像的大小

我想我的内联图像自动调整大小与浏览器的大小，同时它应该是内联的标题太多。我已经尝试过给出的解决方案，但它对我不起作用

这是我的密码：

#标题#{
字体大小：粗体；
文本对齐：居中；
}
#头像{
显示：无；
}
.浮动图像{
浮动：对；
最大宽度：100%；
高度：自动；
}
@介质和全部（最大宽度：1024px）{
#标题{
左边距：10%；
最小宽度：67%；
最大宽度：77%；
显示：内联块；
垂直对齐：顶部；
位置：相对位置；
}
#头像{
显示：内联块；
垂直对齐：顶部；
最大宽度：20%；
高度：自动；
}
}

标题h1
标题h3

您已使用内嵌样式调整图像大小；这是主要问题。您可以做两件事：

将宽度和高度添加到floatingimage类 或

创建一个新类，例如

.wh100

，宽度为100px；高度：100px；并在html中使用带有.floatingimage的第二个类，例如img class=“floatingimage wh100”

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

然后你的图像应该大小合适

试一试

重新编辑：（回到计算机上-叹气..）。。干得好。。我不久前发布的标题缩小到75%的提琴

标题{
宽度：75%；
高度：自动；
保证金：0自动；
填充：0；
}
#标题{
字体大小：粗体；
文本对齐：居中；
最大宽度：80%；
}
#头像{
/*显示：无*/
保证金：0；
填充：0；
最大宽度：20%；
高度：自动；
浮动：对；
}
.浮动图像{
位置：相对位置；
显示：无；
}
.wh100{
宽度：100px；
高度：100px；
}
@介质和全部（最大宽度：480px）{
#头像{
利润率最高：8%！重要；
}
}
@介质和全部（最大宽度：1024px）{
#标题，
#头像{
保证金：0；
填充：0；
最高：2%；
显示：内联！重要；
垂直对齐：中间！重要；
}
#标题{
最大宽度：80%；
位置：相对位置；
浮动：左；
}
#头像{
利润率最高：4%；
最大宽度：20%；
位置：相对位置；
浮动：对；
}
#头像{
位置：相对位置；
最大宽度：100%；
高度：自动；
}
}

标题h1
标题h3

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

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>

---

你可以在小提琴上查一下

谢谢你的帮助，伙计。您能解释一下您是如何使用flex显示属性来完成这项工作的吗？在标题上使用

display flex

，可以使孩子的身高更高。在旁边的元素上，我将

align self

属性设置为

center

以垂直对齐图像。Flex将始终与

#header_title

中的文本一样高，因此必须缩放图像，使其低于

#header_title

，并放在中间。我向您推荐这篇关于flex display的精彩文章。链接：。您是否可以建议当屏幕大小<1024px时，图像将与h1元素内联，而不是位于h2元素下/抱歉，回复太晚。她在招待客人。但是这个代码应该工作得更好。如果它们都是div，并且宽度加起来是100（我把它们加起来是99，这是肯定的！），那么基本上更好。我内联显示，并将它们设置为显示在顶部：2%；您可以根据需要进行调整。希望这有帮助。我只在我的手机上测试过，我远离电脑（非常罕见！！哈哈），但是如果你有问题，可以发一个问题。顺便说一句，如果你需要更接近标题的图像，你可以在照片div中添加一个边距（或者你可以缩短整个标题的宽度，比如说，70%，并将边距设置为0自动。这样会更好。）@BatakrishnaSahu我会很乐意为你看的。。但我更愿意你问一个新问题。您可以将代码粘贴到jsfiddle、net或jsbin.com（创建帐户是免费的），然后您将有很多忙碌的蜜蜂可以查看它。。我手头的时间有限更新：有一只忙碌的蜜蜂来修复它（是的，你们是对的，发布这个问题真的很有帮助）。无论如何，谢谢你给我你的限制，并帮助我完成代码，所以：-）…（很抱歉，但找不到任何其他方式来感谢她）

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