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>