CSS 圖片放大的使用技巧指南

一、CSS 圖片放大縮小

CSS 中可以通過設置 transform: scale() 屬性實現圖片的放大和縮小，這個屬性的值為需要縮放的倍數，例如設置 transform: scale(2) 將會把圖片放大到原圖的兩倍。我們也可以通過媒體查詢來為不同分辨率設備設置不同的縮放比例：

@media screen and (min-width: 992px) {
  .image-container {
    transform: scale(1.5);
  }
}
@media screen and (max-width: 991px) {
  .image-container {
    transform: scale(1);
  }
}

以上代碼將會在大屏幕設備上為圖片容器設置 1.5 倍大小，小屏幕上保持原始尺寸。如果需要在移動端設備上禁用圖片的縮放，可以使用下面的代碼：

@media screen and (max-width: 640px) {
  .image-container {
    transform: none;
  }
}

二、CSS 圖片大小調整

CSS 中的 width 和 height 屬性可以用來調整圖片大小，例如：

img {
  width: 200px;
  height: 200px;
}

以上代碼將會把圖片的寬高設置為 200px。如果需要等比例縮放圖片，可以只指定其中一個尺寸，並保持另一個尺寸自適應：

img {
  width: 200px;
  height: auto;
}

三、CSS 圖片放大隱藏

有時候我們需要在鼠標懸停時將圖片放大並顯示相關的信息，這種效果可以通過 CSS 的 :hover 偽類實現。為了避免圖片擠壓其他元素，我們可以將圖片容器的尺寸設為固定值，然後在放大時使用 transform-origin 屬性將圖片放大中心點調整到容器中心：

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.image-container img {
  transition: transform .5s ease;
}
.image-container:hover img {
  transform: scale(1.2);
  transform-origin: center center;
}

四、CSS 圖片放大不失真

如果我們通過 transform: scale() 將圖片放大，有可能出現圖片失真的情況。為了解決這個問題，我們可以將圖片放大前的尺寸設置為圖片容器的尺寸，並將圖片的 object-fit 屬性設為 cover:

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
.image-container:hover img {
  transform: scale(1.2);
  transform-origin: center center;
}

五、CSS 圖片放大效果

CSS 中的 transition 屬性以及 transform: scale() 和 opacity 屬性可以結合使用，實現圖片在鼠標懸停時緩慢放大並半透明顯示的效果：

.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, opacity .5s ease;
}
.image-container:hover img {
  transform: scale(1.2);
  transform-origin: center center;
  opacity: .5;
}

六、CSS 圖片放大代碼

下面是將圖片作為按鈕，在鼠標懸停時放大的簡單示例：

.button-image {
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.button-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}
.button-image:hover img {
  transform: scale(1.2);
  transform-origin: center center;
}

七、CSS 圖片放大鏡

可以通過在圖片容器上疊加一個放大鏡容器，然後根據鼠標位置計算放大鏡的位置及顯示區域，實現圖片放大鏡的效果。

.image-container {
  position: relative;
  width: 400px;
  height: 300px;
  overflow: hidden;
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.magnifier {
  position: absolute;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 5px solid #FFF;
  box-shadow: 0 0 5px rgba(0, 0, 0, .5);
  background-size: 100% 100%;
  visibility: hidden;
  pointer-events: none;
}
.image-container:hover .magnifier {
  visibility: visible;
}

八、CSS 圖片放大超框代碼

下面是一個簡單的示例，將圖片放在容器中，並可以通過按鈕在不打亂頁面布局的情況下將圖片放大到超出容器的範圍：

.container {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #DDD;
  overflow: hidden;
}
.container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, .5);
  display: none;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #FFF;
}
.overlay.active {
  display: flex;
}
.overlay img {
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
}
.button {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background: #333;
  color: #FFF;
  cursor: pointer;
}

HTML 部分：


原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/243932.html