Question

我正在尝试在div父块中实现自动调整大小。我希望图像可以调整为确切的div块宽度，或者如果文本将调整图像的大小并更改div块的宽度以使页面看起来整洁，则更好。

    <body style="margin: auto;max-width: 800px">

<div class="messages" style="color: #002b55;max-width:100%;height: auto;font-size: 11px">
    <img src=cid:header.png alt="header">
    <div style="margin-top: 7px"><b>Lieber Nutzer,</b></div>

例如，如果图像大于文本，我希望将图像调整为最长的一行

Answer 1

您可以使用display: flex;调整图像和div的大小，也可以使用vw而不是px来更改文本的大小，例如font-size:5vw;查看窗口的大小。

看看我在这里做了什么。这是jsfillde，供您使用窗口大小。 https://jsfiddle.net/dcxp0uqe/

.messages {
  width 50%;
  height 50%;
  display: flex;
  font-size:5vw;
}

.messages * {
  display: flex;
  width: 50%;
  height: 50%;
}

<body style="margin: auto;max-width: 800px">

<div class="messages" style="">
    <img src="https://w3schools.com/html/img_girl.jpg" alt="header">
    <div style="margin-top: 7px"><b>Lieber Nutzer,</b></div>
    </div>

自动调整div的大小及其内容

1 个答案: