图片展示：点击放大，自适应屏幕 - lightbox插件实现 - 常规

可以使用lightbox插件来实现点击图片放大的效果，同时自适应屏幕大小。

首先，在<head>标签中引入lightbox的css和js文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>

然后，在<img>标签中添加'data-lightbox'属性，并设置为图片所属的组名，如'data-lightbox='group1'，以便在点击图片时可以浏览同一组的图片。

最后，在<script>标签中添加以下代码，以启用lightbox插件：

$(document).ready(function() {
    lightbox.option({
        'resizeDuration': 200,
        'wrapAround': true
    });
});

完整代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>图片展示</title>
    <meta charset="utf-8">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }

        h1 {
            text-align: center;
            margin-bottom: 30px;
        }

        .row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -10px;
        }

        .col {
            flex: 1;
            padding: 0 10px;
            margin-bottom: 20px;
        }

        .col img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 5px;
        }

        .product-info {
            display: flex;
            align-items: center;
            margin-top: 50px;
        }

        .product-info img {
            width: 30%;
            height: auto;
            margin-right: 50px;
            border-radius: 5px;
        }

        .product-info p {
            font-size: 18px;
            line-height: 1.5;
            color: #333;
        }
    </style>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/css/lightbox.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.3/js/lightbox.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script>
        $(document).ready(function() {
            // 图片hover效果
            $('.col img').hover(function() {
                $(this).css('opacity', '0.8');
            }, function() {
                $(this).css('opacity', '1');
            });

            // 启用lightbox插件
            lightbox.option({
                'resizeDuration': 200,
                'wrapAround': true
            });
        });
    </script>
</head>
<body>
    <div class="container">
        <h1>图片展示</h1>
        <div class="row">
            <div class="col">
                <a href="img/1.png" data-lightbox="group1"><img src="img/1.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/2.png" data-lightbox="group1"><img src="img/2.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/3.png" data-lightbox="group1"><img src="img/3.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/4.png" data-lightbox="group1"><img src="img/4.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/5.png" data-lightbox="group1"><img src="img/5.png" alt=""></a>
            </div>
            <div class="col">
                <a href="img/6.png" data-lightbox="group1"><img src="img/6.png" alt=""></a>
            </div>
        </div>
        <div class="product-info">
            <img src="img/2.png" alt="">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sollicitudin, massa ut ultricies euismod, turpis nulla mattis metus, ac posuere enim nunc vel urna. Nulla facilisi. Sed ut massa nec erat faucibus facilisis. Donec euismod augue vitae enim vulputate, eget aliquam arcu bibendum. Nam commodo, mi vel bibendum bibendum, erat quam luctus enim, vel ullamcorper purus felis vitae urna. Morbi sed tincidunt nulla. Integer id magna ac est commodo luctus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Proin venenatis arcu ut ante bibendum, vel sollicitudin turpis scelerisque. Sed lobortis, mauris vel volutpat hendrerit, elit elit rutrum lacus, id tincidunt erat ipsum quis sem. Sed efficitur, enim quis sagittis iaculis, justo nunc bibendum tortor, vel bibendum metus enim et sapien. Suspendisse potenti. Etiam malesuada, mi eget vulputate cursus, ipsum dui sagittis metus, vel elementum justo elit vel lacus.</p>
        </div>
    </div>
</body>
</html>