CSS 裁剪图像展开 OnClick？

Question

新手：需要帮助了解哪种编码风格和一些术语来指导我做我想做的事情。

我在主页的下半部分使用 CSS 裁剪了图像

.crop_container {
    position:relative;
    text-align:center;
}

.crop_img {
    max-height:150px;
    overflow:hidden;
}

然后图像在单个页面上已满。

我想要的是点击展开裁剪。
好像我已经看到它完成了，但不确定它是 jquery 还是 bootstrap 还是...

我的主要代码是 HTML、PHP 和 CSS 以及一些 JS。
任何方向和条款都会有很大帮助。

Answer 1

我认为 Bootstrap 和 jQuery 没有现成的解决方案，但也许以下示例可以帮助您。

无动画（无需获取图片的真实高度）

$(document).ready(function() {

  $('.image-preview').on('click', toggleImage);

  function toggleImage(event) {
    $(event.target).closest('.image-preview').toggleClass('expanded');
  }

});

.image-preview {
  width: 100%;
  max-height: 150px;
  cursor: pointer;
  overflow: hidden;
}

.image-preview.expanded {
  max-height: initial;
}

.image-preview img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Here is my heading</h1>
<div class="image-preview" title="Click to expand!">
  <img src="https://dummyimage.com/1920x1080/118c42/ffffff.png&text=This+is+an+example" alt="example" />
</div>
<p>Here will stay some text ...</p>

带有动画

$(document).ready(function() {

  $('.image-preview').on('click', toggleImage);

  function toggleImage(event) {
    var imagePreview = $(event.target).closest('.image-preview');
    var height = imagePreview.data('preview-height');

    imagePreview.toggleClass('expanded');

    if (imagePreview.hasClass('expanded')) {
      height = imagePreview.find('img').height();
    }

    imagePreview.css('height', height);
  }

});

.image-preview {
  width: 100%;
  height: 150px;
  cursor: pointer;
  overflow: hidden;
  -webkit-transition: all 0.25s ease-in;
  -moz-transition: all 0.25s ease-in;
  -o-transition: all 0.25s ease-in;
  transition: all 0.25s ease-in;
}

.image-preview img {
  width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Here is my heading</h1>
<div class="image-preview" title="Click to expand!" data-preview-height="150">
  <img src="https://dummyimage.com/1920x1080/118c42/ffffff.png&text=This+is+an+example" alt="example" />
</div>
<p>Here will stay some text ...</p>

有叠加 - 无动画

$(document).ready(function() {

  $('.image-preview').on('click', toggleImage);

  function toggleImage(event) {
    $(event.target).closest('.image-preview').toggleClass('expanded');
  }

});

.image-preview {
  position: relative;
  width: 100%;
  max-height: 150px;
  cursor: pointer;
  overflow: hidden;
}

.image-preview.expanded {
  max-height: initial;
}

.image-preview img {
  position: relative;
  width: 100%;
  z-index: 100;
}

.image-preview .image-overlay {
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  z-index: 200;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>Here is my heading</h1>
<div class="image-preview" title="Click to expand!">
  <img src="https://dummyimage.com/1920x1080/118c42/ffffff.png&text=Background" alt="example" />
  <div class="image-overlay">
    <h1>This is an example</h1>
  </div>
</div>
<p>Here will stay some text ...</p>