html图片一行展示4张，并且点击可以放大

在HTML和CSS中，你可以通过创建一个响应式的网格布局来实现四张图片一行显示并支持点击放大效果。这通常涉及到以下几个步骤：

1. **创建HTML结构**:

   <div class="grid-container">
     <img src="image1.jpg" class="grid-item" data-zoom-image="image1_large.jpg">
     <img src="image2.jpg" class="grid-item" data-zoom-image="image2_large.jpg">
     <img src="image3.jpg" class="grid-item" data-zoom-image="image3_large.jpg">
     <img src="image4.jpg" class="grid-item" data-zoom-image="image4_large.jpg">
   </div>

使用`<img>`标签，每个图片都有一个`data-zoom-image`属性，用于存储大图地址。

2. **样式设置** (CSS):

   .grid-container {
     display: grid;
     grid-template-columns: repeat(4, 1fr); /* 四列 */
     gap: 10px; /* 图片之间的间距 */
     max-width: 100%; /* 自适应屏幕宽度 */
     overflow-x: auto; /* 当有多行时显示滚动条 */
   }
   
   .grid-item {
     cursor: pointer; /* 点击缩放提示 */
     width: 100%;
     height: auto; /* 保持原始比例 */
     transition: transform 0.5s ease; /* 缩放过渡效果 */
   }

   .grid-item:hover {
     transform: scale(1.1); /* 鼠标悬停时放大 */
   }

3. **JavaScript实现放大功能**:
为了实现点击放大，你需要编写一些JavaScript来处理事件。比如，你可以使用jQuery库配合Zoom.js等插件，或者自定义一个简单的函数来放大图片：

   $(document).ready(function() {
     $('.grid-item').click(function(e) {
       e.preventDefault(); // 阻止默认行为
       var $this = $(this);
       var largeImage = $this.attr('data-zoom-image');
       // 创建一个新的隐藏元素加载大图
       var zoomedImage = $('<img>', {src: largeImage});
       // 显示大图
       $zoomed = zoomedImage.load(function() {
         $this.replaceWith($zoomed); // 替换原图
         $zoomed.css({
           position: 'absolute',
           top: 0,
           left: 0,
           maxWidth: '100%',
           maxHeight: '100%'
         });
       });
     });
   });