html – Bootstrap放大图片占据整列_html-js-css

概述我正在使用bootstrap,我有一行有1列,另一行有2列. 所有项目中都有一张图片,并且应该占据列内的所有可用空间. 到目前为止,我无法获得第一行上的第一个图像来填充div宽度,当我缩小窗口时,此图像正确调整大小,但是当我放大它时,图片将会当我希望它始终与div宽度相同时,调整其原始最大大小这是片段：https://jsfiddle.net/gd0obgg9/ 这是代码： <body> 我正在使用bootstrap,我有一行有1列,另一行有2列.
所有项目中都有一张图片,并且应该占据列内的所有可用空间.
到目前为止,我无法获得第一行上的第一个图像来填充div宽度,当我缩小窗口时,此图像正确调整大小,但是当我放大它时,图片将会
当我希望它始终与div宽度相同时,调整其原始最大大小

这是片段：https://jsfiddle.net/gd0obgg9/

这是代码：

<body>   <div >      <div >         <div >            <h1 >Portfolio Item            </h1>         </div>      </div>      <div >         <div></div>         <div >            <img  src="http://placehold.it/550x200" alt="">         </div>         <div></div>      </div>      <div >         <hr>         <div >            <a href="#">            <img  src="http://placehold.it/300x300" alt="">            </a>         </div>         <div >            <a href="#">            <img  src="http://placehold.it/300x300" alt="">            </a>         </div>      </div>   </div></body>

我希望我的550×200能够充分填充宽度
有什么建议？谢谢

解决方法如果我理解正确,要使图像全宽使用：

.img-responsive {    wIDth: 100%;}

请注意,在某些情况下,这会扭曲图像以覆盖整个div

在我的测试中：

总结

以上是内存溢出为你收集整理的html – Bootstrap放大图片占据整列全部内容，希望文章能够帮你解决html – Bootstrap放大图片占据整列所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: https://www.outofmemory.cn/web/1068680.html

html – Bootstrap放大图片占据整列

发表评论

评论列表（0条）