Question

我有一个html / css块，用于显示图像并叠加颜色<div>和文本。

我想让后台<img>能够在不扩展容器（bootstrap col）的情况下进行缩放。

我尝试使用mouseenter和mouseleave事件在jQuery中添加一个新类，并在max-width元素中使用CSS max-height和img但是图像当放大时，静止图像会延伸到容器之外。

任何提示？

<script>
$(document).ready(function(){
  $(".category").mouseenter(function(){
    $(this).prevAll('img').first().addClass("img-category-zoom");
  });
  $(".category").mouseleave(function(){
    $(this).prevAll('img').first().removeClass("img-category-zoom");
  });

});
</script>

<style>
.category {
  position: absolute;
  top: 0px; left: 0px;
  z-index: 3;
  width: 100%; height: 100%;
  background: rgba(172, 44, 48, 0.85);
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(172, 44, 48, 0);
}
.category:hover {
  border-style: solid;
  border-width: 1px;
  border-color: white;
}
.img-category {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  transition: all 0.5s ease;
}
.img-category-zoom {
  transform: scale(1.2);
}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="page">
<div class="container-fluid">
  <div class="content row">
    <div class="no-padding col-lg-6 col-md-6 col-sm-6 col-xs-6 even">
      <img src="http://via.placeholder.com/50x50" alt="" class="img-category img-responsive">
      <div class="category">OVERLAY</div>
    </div>
  </div>
</div>
</div>

Answer 1

您可以将<?php require 'vendor/autoload.php'; $fullpage = ' <html> <head> <title>Base64 Test</title> </head> <body> <h1>Title of Test Document</h1> <img src="data:image/png;base64,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" /> <p>End of document.</p> </body> </html> '; use Dompdf\Dompdf; use Dompdf\Options; $options = new Options(); $options->setDpi(96); $options->set('isHtml5ParserEnabled', true); $options->set('isRemoteEnabled', true); $options->set('debugKeepTemp', true); $dompdf = new Dompdf($options); $dompdf->loadHtml($fullpage); $dompdf->setPaper('A4', 'portrait'); $dompdf->render(); $dompdf->stream("Report.pdf", array( 'Attachment'=>0)); ?>添加到容器div

＆＃13;

overflow: hidden

＆＃13;

$(document).ready(function(){
  $(".category").mouseenter(function(){
    $(this).prevAll('img').first().addClass("img-category-zoom");
  });
  $(".category").mouseleave(function(){
    $(this).prevAll('img').first().removeClass("img-category-zoom");
  });

});

＆＃13;

.category {
  position: absolute;
  top: 0px; left: 0px;
  z-index: 3;
  width: 100%; height: 100%;
  background: rgba(172, 44, 48, 0.85);
  color: white;
  border-style: solid;
  border-width: 1px;
  border-color: rgba(172, 44, 48, 0);

}
.category:hover {
  border-style: solid;
  border-width: 1px;
  border-color: white;

}
.img-category {
  position: relative; z-index: 2;
  width: 100%; height: 100%;
  max-width: 100%; max-height: 100%;
  transition: all 0.5s ease;
 
}
.img-category-zoom {
  transform: scale(1.2);
  
}
/* Add this */
.col-lg-6, .col-md-6, .col-sm-6, .col-xs-6 {
  overflow: hidden;
  }

＆＃13;

缩放背景图片

1 个答案: