亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Gemeinschaft

Lernen

Tools-Bibliothek

KI-Tools

Freizeit

Deutsch

Wie kann ich die Textbreite an die Breite eines Bildes/Titels mit dynamischer Gr??e anpassen?

P粉741678385 2024-04-06 10:04:43

907

Sehen Sie sich diesen Codestift an: https://codepen.io/allen-houng/pen/XGMjMr?editors=1100#0

    <div>
      <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style=";">
      <div class="description">
        Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
      </div>
    </div>

Ich habe ein übergeordnetes Div und zwei untergeordnete Divs – ein Bild und eine Beschreibung. Ich ?ndere die Gr??e des Bildes basierend auf der H?he des Ansichtsfensters, was bedeutet, dass die Breite dynamisch und reaktionsf?hig ist. Wie kann ich die Gr??e des entsprechenden Geschwister-Div .description ?ndern, um es ohne JavaScript an die Breite des Bildes anzupassen?

Mit anderen Worten, wie transformiere ich:

Geben Sie Folgendes ein:

P粉741678385

Antworte allen(2)

P粉0088297912024-04-07 09:39:14 2 Etage

您可以簡單地將圖像的寬度設(shè)置為 100%。只需添加“寬度：100%；”進(jìn)入您的 img 樣式標(biāo)簽進(jìn)行測試，如下所示：

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" style="width: 100%;">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

或者將其放入一個類中：

.img-full {
  display: block;
  width: 100%;
}

<div>
  <img src="https://res.cloudinary.com/djcpf0lmv/image/upload/v1549372650/Templates/yoga.jpg" data-radium="true" class="img-full">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

“display: block”只是確保您的 img 始終位于它自己的塊中，無論寬度如何。即您的文字不會出現(xiàn)在其旁邊，只會出現(xiàn)在其下方或上方。

Wie +0

Antwort hinzufügen

P粉0304790542024-04-07 09:10:01 1 Etage

使容器inline-block（或任何收縮到適合的配置，如table、inline-grid、inline -flex、float、absolute 等）然后強(qiáng)制文本寬度為 0，從而定義容器的寬度通過圖像（文本不影響寬度），然后使用 min-width

再次強(qiáng)制寬度為 100%

.parent {
  background: pink;
  display:inline-block;
}

img {
  display: block;
  max-height: 70vh;
}

.description {
  width:0;
  min-width:100%;
}

<div class="parent">
    <img src="https://picsum.photos/id/1004/900/600">
  <div class="description">
    Fusce consequat. Nulla nisl. Nunc nisl. Duis bibendum, felis sed interdum   venenatis, turpis enim blandit mi, in porttitor pede justo eu massa. Donec dapibus. Duis at velit eu est congue elementum.
  </div>
</div>

Wie +0

Antwort hinzufügen