提问人：Ben 提问时间：6/25/2023 更新时间：6/25/2023 访问量：22
图像缩小以适合 div，但随着列变窄，宽度会缩小
Image shrinks to fit in div, but shrinks in width as column gets narrower
问：
我很确定我只是错过了一些基本的东西，但就我而言，我总能弄清楚。 背景：我正在使用 bootstrap 3（请不要判断:)）、html 和 css。 我有一个具有报纸样式列的 div（文本从一列的底部流向下一列）。我想在我的图像周围环绕文本，以便缩小图像以适合 div 的高度，但如果列比图像窄，图像的宽度仍然会缩小。
我有第二部分，但似乎无法将图像保留在 div 中。
[HTML全文]
<h1>
Test
</h1>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="newspaper">
<p><img src="https://streissguthgardens.com/assets/Streissguth-In_Love_with_a_Hillside_Garden-e1b787f274c8c2cc3beaf52cdcba1dbee982c503ab098d558a4053702ba8d8e1.jpg" class="book img-responsive img-thumbnail pull-left" alt="Place holder text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Faucibus vitae aliquet nec ullamcorper sit amet risus. Urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin. Ipsum nunc aliquet bibendum enim facilisis gravida.</p>
<p>Congue nisi vitae suscipit tellus mauris a diam. Mus mauris vitae ultricies leo integer malesuada nunc vel. Nunc vel risus commodo viverra maecenas. Sed arcu non odio euismod lacinia at quis risus sed. Eu sem integer vitae justo eget. Lectus quam id leo in vitae. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Id leo in vitae turpis massa sed elementum tempus. In eu mi bibendum neque egestas congue quisque egestas. Nisl pretium fusce id velit ut tortor pretium. Convallis tellus id interdum velit laoreet id donec. Sed vulputate odio ut enim. Ipsum a arcu cursus vitae congue mauris. Lectus nulla at volutpat diam ut venenatis. Morbi tristique senectus et netus et malesuada fames ac. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Est velit egestas dui id.
</p>
</div>
</div>
</div>
</div>
CSS的
.book { height: 100%
max-height: 100%;
object-fit: scale-down;
width: auto;
}
.newspaper {
background: lightgray;
column-count: 3;
column-gap: 20px;
}
这是我的小提琴。
这是全屏的屏幕截图（不起作用，图像不应延伸到文本底部）
这是在图像周围流动的文本（工作）
这是缩小的图像，因为列是新的窄（工作）
答：
1赞
Tim R
6/25/2023
#1
我发现图像溢出其容器的原因，“按原样”，是类（声明）。如果删除此类，图像不会溢出，但显然，您希望文本在图像周围浮动。pull-leftfloat: left!important
但是，我只需将图像放在 .我不明白有什么变化，但决定继续发布这个答案，而不是花更多时间试图弄清楚。p
之前： 之后： <div class="newspaper"><p><img>Lorem ipsum</p></div><div class="newspaper"><img><p>Lorem ipsum</p></div>
.book {
height: 100%;
max-height: 100%;
object-fit: scale-down;
width: auto;
}
.newspaper {
background: lightgray;
column-count: 3;
column-gap: 20px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<h1>
Test
</h1>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="newspaper">
<img src="https://streissguthgardens.com/assets/Streissguth-In_Love_with_a_Hillside_Garden-e1b787f274c8c2cc3beaf52cdcba1dbee982c503ab098d558a4053702ba8d8e1.jpg" class="book img-responsive img-thumbnail pull-left" alt="Place holder text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Faucibus vitae aliquet nec ullamcorper sit amet risus. Urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin. Ipsum nunc aliquet bibendum enim facilisis gravida.</p>
<p>Congue nisi vitae suscipit tellus mauris a diam. Mus mauris vitae ultricies leo integer malesuada nunc vel. Nunc vel risus commodo viverra maecenas. Sed arcu non odio euismod lacinia at quis risus sed. Eu sem integer vitae justo eget. Lectus quam id leo in vitae. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Id leo in vitae turpis massa sed elementum tempus. In eu mi bibendum neque egestas congue quisque egestas. Nisl pretium fusce id velit ut tortor pretium. Convallis tellus id interdum velit laoreet id donec. Sed vulputate odio ut enim. Ipsum a arcu cursus vitae congue mauris. Lectus nulla at volutpat diam ut venenatis. Morbi tristique senectus et netus et malesuada fames ac. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Est velit egestas dui id.
</p>
</div>
</div>
</div>
</div>评论
0赞
Ben
6/25/2023
谢谢。这是最终奏效的答案。更复杂的是，它在您的嵌入式代码中运行良好，在我的 Fiddle 中失败了（但我是新手），最终在我的实际网站中工作。
2赞
S. Masters
6/25/2023
#2
我通过更改 .book 类样式来做对了，如果您想避免图像质量损失，我建议以像素为单位设置“最大高度”。
.book {
width: 100%;
background: transparent;
border: none;
object-fit: contain;
max-height: inherit; /* replace "inherit" with something like "250px" to avoid poor image quality on larger screens. */
}
.newspaper {
background: lightgray;
column-count: 3;
column-gap: 20px;
}<!--
Bootstrap docs: https://getbootstrap.com/docs
-->
<h1>
Test
</h1>
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="newspaper">
<p><img src="https://streissguthgardens.com/assets/Streissguth-In_Love_with_a_Hillside_Garden-e1b787f274c8c2cc3beaf52cdcba1dbee982c503ab098d558a4053702ba8d8e1.jpg" class="book img-responsive img-thumbnail pull-left" alt="Place holder text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi est sit amet facilisis. Faucibus vitae aliquet nec ullamcorper sit amet risus. Urna id volutpat lacus laoreet non curabitur gravida arcu. Neque gravida in fermentum et sollicitudin. Ipsum nunc aliquet bibendum enim facilisis gravida.</p>
<p>Congue nisi vitae suscipit tellus mauris a diam. Mus mauris vitae ultricies leo integer malesuada nunc vel. Nunc vel risus commodo viverra maecenas. Sed arcu non odio euismod lacinia at quis risus sed. Eu sem integer vitae justo eget. Lectus quam id leo in vitae. Malesuada proin libero nunc consequat interdum varius sit amet mattis. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Lectus vestibulum mattis ullamcorper velit sed ullamcorper. Id leo in vitae turpis massa sed elementum tempus. In eu mi bibendum neque egestas congue quisque egestas. Nisl pretium fusce id velit ut tortor pretium. Convallis tellus id interdum velit laoreet id donec. Sed vulputate odio ut enim. Ipsum a arcu cursus vitae congue mauris. Lectus nulla at volutpat diam ut venenatis. Morbi tristique senectus et netus et malesuada fames ac. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Est velit egestas dui id.
</p>
</div>
</div>
</div>
</div>
评论