html – 缩放图片中心而不是改变高度

概述我的网站中心有一个画廊 – 它有一个动态宽度(自举列)和固定高度(80vh).我希望里面的图像有50％的容器宽度,350px高度： <div class="row"> <div class="col-md-3"></div> <div class="col-md-6" style="height: 80vh;"> <div style="overflow-y: auto;"> 我的网站中心有一个画廊 – 它有一个动态宽度(自举列)和固定高度(80vh).我希望里面的图像有50％的容器宽度,350px高度：

<div >  <div ></div>  <div  >    <div >      <div >        <img src="..." >      </div>      <div >        <img src="..." >      </div>      <div >        <img src="..." >      </div>    </div>  </div>  <div ></div></div>

问题是,当我调整网站大小时,宽度会改变,高度保持不变 – 图像会调整大小.有更好的解决方案吗？我一直在考虑放大图像而不是调整整个尺寸 – 这可能吗？

解决方法 如果您必须为每个图库项目使用350px高度并希望图像保持纵横比,则可以使用background-size：cover来放大和裁剪图像,而不是调整图像大小.见： https://jsfiddle.net/nelonoel/c8zsscuL/ 总结

以上是内存溢出为你收集整理的html – 缩放图片中心而不是改变高度全部内容，希望文章能够帮你解决html – 缩放图片中心而不是改变高度所遇到的程序开发问题。

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