Question

I am designing user guides for my company and need to find a better way to view the images. I have got scaling on hover to work fine, but this will only work properly if the user has a large computer screen when viewing the image. I therefore want to center the image on hover.

In addition it would be lovely to let the image scale in relation to the window size. I have bootstrap and jQuery is linked.

My code for it at this moment

     .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.

Answer 1

对img使用object-fit属性

My output should be like this  :

   EMPLOYEES          FREE TIME SLOTS
    EMP1                   10:00:00    12:00:00
    EMP1                   14:00:00    18:00:00
    EMP1                   16:00:00    18:00:00
    EMP2                   08:00:00    10:00:00
    EMP2                   16:00:00    18:00:00
    EMP2                   14:00:00    18:00:00
    EMP3                   16:00:00    18:00:00
    EMP4                   08:00:00    10:00:00
    EMP4                   10:00:00    12:00:00
    EMP4                   16:00:00    18:00:00
    EMP4                   08:00:00    16:00:00 
    EMP4                   14:00:00    18:00:00

Answer 2

如果您尚未链接bootstrap和jquery，请先链接它们。在style标签中，用此替换您当前的代码。（这也是响应性的）。

<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">

Answer 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>

Scale and center image on hover

3 个答案: