在缩小浏览器宽度的时候,图片会超出li的宽度
要确保在缩小浏览器宽度时,图片不会超出 <li>
元素的宽度,您可以为描述文本添加一些样式,以便让图片适应于 <li>
元素。一种常见的方法是使用 CSS 中的 max-width
属性。下面是一个可能的解决方案:
<li class="list-group-item"> <strong>问题描述:</strong> <div class="description"> <div style="max-width: 100%; overflow: hidden;"> {{ repair.description|safe }} </div> </div> </li>
在这个解决方案中,我为描述文本添加了一个内联样式,其中 max-width: 100%;
使其最大宽度不超过父元素的宽度,overflow: hidden;
则可以防止任何超出的内容溢出到周围的元素中。这样,即使图片很大,它也不会超出 <li>
元素的边界。您可以根据需要调整 max-width
的值,以确保适合您的布局。
如果您希望对所有描述文本都应用相同的样式,而不是在每个 <li>
元素中重复设置样式,您可以将样式添加到全局 CSS 文件中,或者在 CSS 中定义一个类,然后将该类应用到每个描述文本的容器中。这样可以使样式更易于管理和维护。