Bagaimanakah saya boleh memadankan lebar teks dengan lebar imej/tajuk bersaiz dinamik?

Question

Lihat pen kod ini: 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>

Saya mempunyai div ibu bapa dan dua div anak - imej dan penerangan. Saya mengubah saiz imej berdasarkan ketinggian viewport, yang bermaksud lebar akan menjadi dinamik dan responsif. Bagaimanakah saya boleh mengubah saiz div adik beradik yang sepadan .description agar sepadan dengan lebar imej tanpa JavaScript?

Dalam erti kata lain, bagaimana saya boleh mengubah:

Masukkan ini:

Answer 1

Anda hanya boleh menetapkan lebar imej kepada 100%. Hanya tambah "width:100%;" ke dalam teg gaya img anda untuk menguji seperti ini:

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

Atau masukkan ke dalam kelas:

.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" cuma pastikan img anda sentiasa berada di dalam bloknya sendiri, tanpa mengira lebarnya. Iaitu, teks anda tidak akan muncul di sebelahnya, hanya di bawah atau di atasnya.

Answer 2

Buat bekas inline-block（或任何收缩到适合的配置，如table、inline-grid、inline -flex、float、absolute 等）然后强制文本宽度为 0，从而定义容器的宽度通过图像（文本不影响宽度），然后使用 min-width

再次强制宽度为 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>