使用 CSS 平滑缩放背景图像（免费代码）

Posted on by

在本文中，您将学习如何使用 HTML 和 CSS缩放背景图像。如今，图像中添加了不同类型的平滑缩放效果。大多数背景图像缩放仅由 CSS 创建。

所以在这里我将向您展示如何使用 CSS 缩放图像。CSS 缩放效果基本上有两种，一种是放大，一种是缩小。我将在这里向您展示两种类型的设计。所以在这里您将知道如何在图像中添加放大和缩小。

平滑背景图像缩放 CSS

从本教程中，您可以轻松学习如何将背景图像缩放添加到任何图像。早些时候我分享了高级图像缩放和图像放大镜的各种设计。但这些项目是由 JavaScript、JQuery 或各种外部库创建的。 

方法 – 1

CSS 平滑图像放大

这是一个CSS 放大设计，可以放大你的图像。这基本上是悬停背景图像缩放。因此，当您将鼠标悬停在图像上时，该图像将放大。

演示：
https://www.foolishdeveloper.com/p/demo-2.html#demo4

您可以根据自己的喜好设置此缩放的数量或值。我之前已经展示过这种由 JavaScript 创建的图像放大效果。这种设计更加完善和先进。Transform: scale ()用于使用CSS 缩放图像。

使用下面的 HTML，我添加了这个平滑图像放大设计的基本信息。我在 CSS 中添加了此处使用的图像。

<div class="image zoom-in">
   <span>Zoom in</span>
</div>

以下 CSS 设计了此图像放大所需的信息。首先设计网页，然后确定图像的宽度和高度。

Transform: scale (1.35)用于缩放图像。一般来说，这个刻度的值为1。您可以根据需要增加它的值。

 body{
     background: rgb(228, 243, 248);
     color: #fff;
     font-size: 16px;
     font-family: sans-serif;
 }
.image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 430px;
  height: 250px;
  margin: 2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-image: url("https://www.teahub.io/photos/full/247-2478341_hd-pics-photos-cartoon-movie-characters-2-desktop.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 5px solid rgb(183, 185, 186);
}
.image span {
  position: relative;
  z-index: 1;
}

.zoom-in::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-size: cover;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}

.zoom-in:focus::after, .zoom-in:hover::after {
  transform: scale(1.35);
}

方法 – 2

背景图像缩小 CSS

下面的设计是CSS 图片缩小。将鼠标悬停在图像上时，图像将缩小或恢复正常。 

用于放大和缩小设计的代码几乎相同。但是，值还是有区别的
transform: scale ()

演示：
https://www.foolishdeveloper.com/p/demo-2.html#demo5

我使用以下 HTML创建了背景图像缩放的基本结构。此处已创建一个框并添加了一个文本。

<div class="image zoom-out">
   <span>Zoom out</span>
</div>

现在使用 CSS，我设计了Smooth Image Zoom Out。在正常情况下，图像将打开transform: scale (1.55). 

这使我们可以在缩放模式下查看图像。将鼠标悬停在图像上时，图像将缩小。

body{
     background: rgb(228, 243, 248);
     color: #fff;
     font-size: 16px;
     font-family: sans-serif;
 }

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 430px;
  height: 250px;
  margin: 2vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  background-image: url("https://www.teahub.io/photos/full/247-2478341_hd-pics-photos-cartoon-movie-characters-2-desktop.jpg");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 5px solid rgb(183, 185, 186);
}
.image span {
  position: relative;
  z-index: 1;
}

.zoom-out::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  background-size: cover;
  transform-origin: center;
  transition: transform 0.4s ease-in-out;
}

.zoom-out::after {
  transform: scale(1.55);
}
.zoom-out:focus::after, .zoom-out:hover::after {
  transform: scale(1);
}

希望以上这两个设计让您对如何创建平滑背景图像缩放有一个完整的了解。此方法允许您向任何图像添加缩放效果。

正如我之前所说，我已经与您分享了以高级方式制作此类设计的方法。但是，在这种情况下，使用了一些 JavaScript。请评论您喜欢这个简单的 CSS 图像缩放。 

推荐阅读：