Passen Sie die Textbreite an dynamisch dimensionierte Bilder/Titel an: eine Schritt-für-Schritt-Anleitung

Question

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:

Answer 1

您可以简单地将图像的宽度设置为 100%。只需添加“宽度：100%；”进入您的 img 样式标签进行测试，如下所示：

  
  

    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.
  

或者将其放入一个类中：

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

  
  

    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.
  

“display: block”只是确保您的 img 始终位于它自己的块中，无论宽度如何。即您的文字不会出现在其旁边，只会出现在其下方或上方。

Answer 2

将容器设置为 inline-block （或任何收缩配置，如 table、inline-grid、inline-flex、float、absolute 等），然后强制文本宽度为 phpcnc phpcn0 所以容器的宽度是由图像定义（文本不影响宽度），然后使用 min-width 再次强制宽度为 100%

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

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

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

    
  

    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.