Tutoriel sur la mise en œuvre d'effets de galerie d'images réactives à l'aide de CSS

二、CSS样式
为了实现响应式效果，我们需要利用CSS媒体查询来定义不同设备大小下的样式。以下是一个基本的CSS样式示例：

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); grid-gap: 10px; } .gallery a { display: block; overflow: hidden; } .gallery img { width: 100%; height: auto; transition: transform 0.3s ease; } .gallery a:hover img { transform: scale(1.1); }

首先，我们将.gallery元素设置为网格布局，并使用repeat(auto-fit, minmax(300px, 1fr))实现自动适应的图片列布局。这个属性将根据容器的宽度自动调整列数，并且每列最小宽度为300px。

接着，我们为.gallery a设置了display: block;和overflow: hidden;，以确保图片在容器中正确显示。

最后，我们将.gallery img的宽度设置为100%，高度自动调整以保持图片的比例。我们还为图片添加了一个简单的缩放效果，当鼠标悬停在图片上时，图片会放大。

三、添加响应式功能
现在，我们已经有了基本的HTML结构和CSS样式。接下来，我们将通过使用媒体查询来实现响应式功能。以下是一个示例：

@media (max-width: 600px) { .gallery { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } } @media (max-width: 400px) { .gallery { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }

在这个例子中，我们使用媒体查询来适应两个不同的设备宽度。例如，当设备宽度小于等于600px时，我们将.gallery

Afin d'obtenir des effets réactifs, nous devons utiliser des requêtes multimédias CSS pour définir des styles sous différentes tailles d'appareils. Voici un exemple de style CSS de base :

Tout d'abord, nous définissons l'élément.gallerysur une disposition en grille et utilisonsrepeat(auto-fit, minmax(300px, 1fr)) code> Implémente une disposition automatiquement adaptative des colonnes d’images. Cette propriété ajustera automatiquement le nombre de colonnes en fonction de la largeur du conteneur, avec une largeur minimale de 300 px pour chaque colonne.


Enfin, nous définissons la largeur de.gallery imgà 100 % et la hauteur s'ajuste automatiquement pour conserver les proportions de l'image. Nous avons également ajouté un simple effet de zoom à l'image, qui l'agrandira lorsque la souris la survolera.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!