如何垂直居中响应式剪切图像？

Posted 2023-03-23

【中文标题】如何垂直居中响应式剪切图像？

【英文标题】：How to vertically center a responsive clipped image?

【发布时间】：2017-05-30 19:25:55

【问题描述】：

我正在尝试将被剪裁的图像垂直居中。图像是响应式的。在移动设备上，图像是全尺寸的，看起来不错。但是，当浏览器扩展为笔记本电脑时，图像的整个下半部分都被裁剪掉了，顶部没有任何东西被裁剪。

我尝试使用 CSS 中的数字。如果图像的宽度约为 800 像素，它会显示得更好，但仍然会在底部完成所有剪切。

任何能使图像垂直居中并保持响应的想法将不胜感激。谢谢！

html：

  <div class="image-wrap" id="wrapper">
      <img src="cropped-img.jpg" >
  </div>

CSS：

.image-wrap 
    max-height: 450px;
    overflow: hidden;
    max-width: 100%px;       
    -webkit-transition: max-width .5s ease-out;  /* Saf3.2+, Chrome */
    -moz-transition: max-width .5s ease-out;  /* FF4+ */
    -ms-transition: max-width .5s ease-out;  /* IE10? */
    -o-transition: max-width .5s ease-out;  /* Opera 10.5+ */
    transition: max-width .5s ease-out;


    .image-wrap img 
        width: 100%;
        -webkit-transition: margin-top .5s ease-out;  /* Saf3.2+, Chrome */
        -moz-transition: margin-top .5s ease-out;  /* FF4+ */
        -ms-transition: margin-top .5s ease-out;  /* IE10? */
        -o-transition: margin-top .5s ease-out;  /* Opera 10.5+ */
        transition: margin-top .5s ease-out;
    

@media only screen and (min-width: 100%px) 
    .image-wrap  max-width: 100%; 

javascript：

$(document).ready(function() 
 
    var imageHeight, wrapperHeight, overlap, container = $('.image-wrap');  
 
    function centerImage() 
        imageHeight = container.find('img').height();
        wrapperHeight = container.height();
        overlap = (wrapperHeight - imageHeight) / 2;
        container.find('img').css('margin-top', overlap);
    
     
    $(window).on("load resize", centerImage);
     
    var el = document.getElementById('wrapper');
    if (el.addEventListener)   
        el.addEventListener("webkitTransitionEnd", centerImage, false); // Webkit event
        el.addEventListener("transitionend", centerImage, false); // FF event
        el.addEventListener("oTransitionEnd", centerImage, false); // Opera event
    
);

【问题讨论】：

在 image-wrap 中，你有 max-width: 100%px;并且在@media 仅屏幕和（最小宽度：100%px）中。您可能希望将这两个都设置为 100%。

哦，天哪。感谢您指出了这一点。它没有解决我的问题，但肯定对我的事业没有帮助。

【参考方案1】：

如果我做对了你想做的事，请尝试评论你的 js 以使图像居中并使用以下样式

.image-wrap img 

    object-fit:cover;//you can also try "contain" here
    object-fit:center;

    width: 100%;
    -webkit-transition: margin-top .5s ease-out;  /* Saf3.2+, Chrome */
    -moz-transition: margin-top .5s ease-out;  /* FF4+ */
    -ms-transition: margin-top .5s ease-out;  /* IE10? */
    -o-transition: margin-top .5s ease-out;  /* Opera 10.5+ */
    transition: margin-top .5s ease-out;

http://caniuse.com/#search=object-fit

【讨论】：

添加了 1 个有效的 MuhMarigo。我必须将 max-height: 450px; 添加到您的 CSS 代码中。我对跟进对象拟合有点不确定，但这是一个很好的解决方案。它可以在没有所有 JavaScript 的情况下工作。