悬停时缩放和居中图像答案

【问题标题】：Scale and center image on hover悬停时缩放和居中图像
【发布时间】：2018-07-24 10:15:16
【问题描述】：

我正在为我的公司设计用户指南，需要找到一种更好的方式来查看图像。我已经在悬停时缩放以正常工作，但这只有在用户在查看图像时有一个大的计算机屏幕时才能正常工作。因此，我想将图像居中悬停。

此外，让图像相对于窗口大小进行缩放会很可爱。我有引导程序和 jQuery 已链接。

此时我的代码

     .thumbnail {
        transition: transform .5s, left .5s; /* Animation */
    	margin: 0 auto;
        z-index: 2;
    }
    
       @media (min-width: 1600px) { 
       .thumbnail:hover {
    	transform: scale(1.75);
    
    }}
       
       @media (max-width: 1600px) { 
       .thumbnail:hover {
        transform: scale(1.5);
        position: relative;
        left: 25%;
    
    }}

    <img src="http://via.placeholder.com/350x150" class="thumbnail" style="width:800px; height:auto">

The big problem is the side menu who is part of the template on the business website. Click this link to see.

【问题讨论】：

你为什么用left：25%？
如果我不改变位置，手机上的图像会放大并超出窗口

标签： html css twitter-bootstrap-3 transform

【解决方案1】：

对 img 使用 object-fit 属性

.thumbnail {
 object-fit: cover;
}

【讨论】：

object fit 是一个很好的解决方案，我同意，但是缺点是 IE 不支持它并且它在边缘部分支持。这意味着 OP 也必须考虑如何解决该问题。 css-tricks.com/almanac/properties/o/object-fit
检查 q 以获取更新信息。 object-fit 可能会在没有侧边栏的网站上正常工作
问题是 object-fit 调整图像大小以适合其容器，但由于右侧有一个单独的容器，它将调整大小以适应内容容器而不是站点本身。

【解决方案2】：

如果您还没有链接 bootstrap 和 jquery，请先链接它们。在样式标签内用这个替换您当前的代码。（这也是响应式的）。

<style>   
.zoom {
    padding: 50px;
    transition: transform .2s; 
    margin: 0 auto;
    border :none;
}

.zoom:hover {
    transform: scale(1.2); 
    }
</style>

并在 img 标签中为您的班级添加“缩放”。

<img src="http://via.placeholder.com/350x150" class="thumbnail zoom" style="width:800px; height:auto">

【讨论】：

这与我已经使用的几乎相同，但它并没有帮助图像留在窗口内......它适用于缩放部分，但图像仍然在框架之外.
我使用 chrome devTools 来检查响应。它在 chrome devTools 中完美运行。
检查我在q中链接的图像。它表明这可能正常工作，但由于网站上的模板，所有内容都向左推了一点。

【解决方案3】：

.thumb-div {
    overflow: hidden;
  }
  
  .thumb-div img {
    -webkit-transition: ease all 0.3s;
    -moz-transition: ease all 0.3s;
    -o-transition: ease all 0.3s;
    transition: ease all 0.3s;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
  }
  
  .thumb-div:hover img {
    -webkit-transform: scale(1.1) rotate(0.1deg);
    -moz-transform: scale(1.1) rotate(0.1deg);
    -ms-transform: scale(1.1) rotate(0.1deg);
    -o-transform: scale(1.1) rotate(0.1deg);
    transform: scale(1.1) rotate(0.1deg);
  }

<div class="thumb-div">
  <img src="http://via.placeholder.com/350x150" title="" alt="" />
</div>

【讨论】：

请解释它如何解决 OP 的问题。仅发布代码是不够的。
我修改了代码。现在检查它是否正常工作。