图文混排中，如何让父元素仅被文字撑开，而不被图片撑开？

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《图文混排中，如何让父元素仅被文字撑开，而不被图片撑开？ 》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

图文混排中如何控制父元素的高度？

现有父容器（红色边框）包含两个子元素（黑色边框），如图所示，其中图片的高度较文字高。如何让父元素仅被文字撑开，而不被图片撑开？

解决方案：

• 绝对定位（absolute）：将图片子元素设置为绝对定位，使其脱离文档流，不再参与父元素高度的计算。

  .image {
    position: absolute;
    left: 0;  /* 水平定位 */
    top: 0;   /* 垂直定位 */
  }

• 背景图（仅图片元素）：将图片设置为父元素的背景图，但需要注意可能被裁切。

  .container {
    background-image: url("./image.jpg");
    background-size: contain;  /* 限制背景图大小 */
  }

简单来说，使用绝对定位的方法更直接方便。

以上就是《图文混排中，如何让父元素仅被文字撑开，而不被图片撑开？ 》的详细内容，更多关于的资料请关注米云公众号！

小天才、小米、vivo、荣耀、OPPO、传音亮相维信诺 F1 屏幕发光材料体系发布仪式