.img-zoom { position: relative; display: block; overflow: hidden;} .img-zoom img { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; -webkit-transition: transform 0.8s ease-out 0s; -moz-transition: transform 0.8s ease-out 0s; -ms-transition: transform 0.8s ease-out 0s; -o-transition: transform 0.8s ease-out 0s; transition: transform 0.8s ease-out 0s;} .img-zoom .img-frame { position: relative; overflow: hidden;} .img-zoom .img { height: 100%; background-repeat: no-repeat; background-position: 50% 50%; background-color: #f6f6f6; background-size: contain; -webkit-transition: transform 0.8s ease-out 0s; -moz-transition: transform 0.8s ease-out 0s; -ms-transition: transform 0.8s ease-out 0s; -o-transition: transform 0.8s ease-out 0s; transition: transform 0.8s ease-out 0s;} .img-zoom .img img { display: none; min-height: 100%;} .img-zoom:hover img { min-height: 100%; -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08);} .img-zoom:hover .img { -webkit-transform: scale(1.08); -moz-transform: scale(1.08); -ms-transform: scale(1.08); -o-transform: scale(1.08); transform: scale(1.08);} .picture3 { font-size: 0; margin: 0 -12px;} .picture3 > li { display: inline-block; vertical-align: top; width: 25%; padding: 0 12px;} .picture3 .img-zoom { margin: 30px 0 0; border: 1px solid #eee; border-radius: 4px; -webkit-transition: all 0.3s ease-out 0s; -moz-transition: all 0.3s ease-out 0s; -ms-transition: all 0.3s ease-out 0s; -o-transition: all 0.3s ease-out 0s; transition: all 0.3s ease-out 0s; background: #fcfeff; box-shadow: 0px 0.05rem 0.12rem 0px rgba(165, 186, 199, 0.32);} .picture3 .img { padding: 65% 0 0;} .picture3 .text { padding: 10px 0 5px;} .picture3 .title { font-size: 16px; font-weight: 500; line-height: 32px; color: #333; text-align: center;} @media screen and (max-width: 996px) { .picture3 > li { width: 33.33%;} } @media screen and (max-width: 768px) { .picture3 > li { width: 50%;} } @media screen and (max-width: 480px) { .picture3 > li { width: 100%;} }