Padankan lebar teks dengan imej/tajuk bersaiz dinamik: panduan langkah demi langkah

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 lebarnya akan 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%. Cuma tambah "width:100%;" ke dalam teg gaya img anda untuk menguji seperti ini:

  
  

    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.
  

Atau masukkan ke dalam kelas:

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

Tetapkan bekas kepada 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.