正文

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

 2023-03-23  267

关键词：

【中文标题】如何垂直居中响应式剪切图像？【英文标题】：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 的情况下工作。

在响应式方形 div 中垂直居中图像

】在响应式方形div中垂直居中图像【英文标题】：verticallycenterimagewithinresponsivesquarediv【发布时间】：2014-07-0806:38:00【问题描述】：我正在尝试将图像居中在一个div内，该div可以响应地缩放并且始终是方形的。JSFiddle感谢很棒的CSS... 查看详情

响应式缩略图网格，图像在方形 1:1 容器中垂直和水平居中

】响应式缩略图网格，图像在方形1:1容器中垂直和水平居中【英文标题】：ResponsiveThumbnailGridwithImagesCenteredVerticallyandHorizontallyinSquare1:1Container【发布时间】：2012-10-0207:02:21【问题描述】：我正在尝试创建具有以下要求的响应式缩... 查看详情

垂直居中响应图像

】垂直居中响应图像【英文标题】：VerticallyCenterResponsiveImage【发布时间】：2013-03-0419:21:21【问题描述】：我想知道是否有一种简单的方法可以将响应式图像垂直居中。请参考以下jsFiddle：http://jsfiddle.net/persianturtle/yawTb/1/基本HTML... 查看详情

隐藏溢出的响应式垂直中心

...题描述】：在搜索StackOverflow和Google之后，我仍然想知道如何垂直居中大于父元素的图像。我不使用高度，只使用最大高度，因为我想制作一个没有jQuery的响应式解决方案。如果可能的话。这里有一些代码：<divstyle="max-height 查看详情

响应式文本在图像上居中对齐

...我的设置非常满意，但我一辈子都无法让文本在图像上（垂直）居中（它已经水平居中）。只是想知道其他人会如何处理这个问题。我已经将HTML和CSShere完全放在了codepen中。如果您有兴趣调整代码，如果查看详情

响应式设计：如何调整图像/背景图像的大小并垂直对齐 div？

】响应式设计：如何调整图像/背景图像的大小并垂直对齐div？【英文标题】：Responsivedesign:Howtoresizeimages/backgroundimagesandaligndivsvertically?【发布时间】：2013-04-1423:15:56【问题描述】：我正在尝试响应式设计。我的图像目前没有调整... 查看详情

如何在具有（流体高度）的响应框中垂直居中文本[重复]

】如何在具有（流体高度）的响应框中垂直居中文本[重复]【英文标题】：HowdoIverticallycenteringtextinsidearesponsiveboxthathasa(fluidheight)[duplicate]【发布时间】：2013-09-1603:24:22【问题描述】：我正在构建一个响应式网站并使用网格系统。... 查看详情

如何使响应式 SVG 图像居中？ [复制]

】如何使响应式SVG图像居中？[复制]【英文标题】：HowdoIcenteraresponsiveSVGimage?[duplicate]【发布时间】：2017-05-2718:38:42【问题描述】：我正在尝试在它的容器内水平对齐这个SVG（在这种情况下，它可以是任何div、body或其他任何东西... 查看详情

bootstrapdiv垂直居中+水平居中保持响应式

引入bootstrap4css文件，只在bootstrap4有效，bs3效果不太行：垂直居中：为需要垂直居中的div新建如下样式.col-center-block{position:absolute;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY( 查看详情

响应式图像全屏和居中 - 保持纵横比，不超过窗口

...纵向时填充高度）没有作物无倾斜或拉伸（原始纵横比）垂直和水平居中此外，图像的原始大小是未知的。我为此尝试了很多不同的选项，包查看详情

响应式对齐、浮动和居中图像

...时间】：2013-02-2600:17:51【问题描述】：我正在尝试弄清楚如何编写HTML和CSS代码以使3个屏幕截图图像对齐，如下面的屏幕截图所示。这个想法是当用户调整窗口的大小时，左侧和右侧的图像应该向中心移动，或者在主图像后面更... 查看详情

Bootstrap 3和div中垂直居中的响应图像[重复]

...ndiv[duplicate]【发布时间】：2017-12-2522:02:05【问题描述】：如何使图像在Div/Row中垂直居中。我已经搜索过了，但所有的解决方案似乎都表明这是一个很好的解决方案——但它对我不起作用。我正在使用Bootstrap3...https://w 查看详情

垂直对齐内容与浮动元素 + 响应式布局

】垂直对齐内容与浮动元素+响应式布局【英文标题】：Verticalaligncontentwithfloatelement+responsivelayout【发布时间】：2014-08-2800:13:48【问题描述】：我有一个左/右图像的组件框布局+内容需要垂直居中对齐。它需要在顶部图像+底部内容... 查看详情

响应浏览器窗口 (CSS) 调整、缩放和居中图像

...rwindow(CSS)【发布时间】：2015-06-1403:17:18【问题描述】：我如何拥有一张图片，无论是纵向还是横向：水平和垂直居中响应（在调整浏览器窗口大小时保持居中）占据浏览器窗口的固定部分，响应式缩放在调整浏览器窗口大小时保... 查看详情

如何处理具有垂直节奏的响应式图像？

】如何处理具有垂直节奏的响应式图像？【英文标题】：Howtohandleresponsiveimageswithverticalrhythm?【发布时间】：2015-10-0601:02:28【问题描述】：我正在使用Compass/SCSS和垂直节奏方法开发一个HTML页面。我已经以rem单位为段落和标题设置... 查看详情

响应式布局中ul的垂直对齐

】响应式布局中ul的垂直对齐【英文标题】：Verticalalignmentofulinresponsivelayout【发布时间】：2014-02-0804:34:32【问题描述】：我整天都在努力使ul列表和id="menu"在这个响应式布局中垂直居中。非常感谢能在正确的地方提供帮助... 查看详情

如何响应地在相对 div（图像）上方居中绝对 div（文本）？

】如何响应地在相对div（图像）上方居中绝对div（文本）？【英文标题】：Howtocenterabsolutediv(text)aboverelativediv(image)responsively?【发布时间】：2014-09-1021:44:55【问题描述】：我正在使用TwitterBootstrap构建一个模板，并尝试使文本在图... 查看详情

正文