Question

我正在创建一个产品库，其中会有很多产品，当用户点击其中任何一个时，会弹出一个模态窗口放大图像。

除了图像超出模态窗口之外，我大部分都知道它是如何工作的。

我希望添加一些设置，以便无论图像的尺寸如何，模态窗口和图像的大小都保持一致。

我在此链接创建了一个示例视图：

这是html代码。 HTML：

WITH ABC
AS
(
select  PolicyNumber, 
        ClaimNumber, 
        ReserveStatus, 
        TransactionDate,
        --[Open Y/N],
        Row_number() over(partition by policyNumber, ClaimNumber order by TransactionDate desc) as Indicator
from RockhillClaimsDataFeed_PBI
)
Update ABC
SET ABC.Indicator = 1 CASE WHEN ABC.ReserveStatus = 'Open' THEN '1' ELSE '0'
WHERE ABC.Indicator = 1

CSS：

<div class="col-lg-3">
    <a href="#" class="subproduct2 subproduct  thumbnail">
        <div class="caption">
            <h4 class="">Universal Studios</h4>
        </div> <img src="http://www.lastrawberryfest.com/wp-content/uploads/2013/02/Travel-to-the-Heart-of-Los-Angeles-Best-places-to-visit.jpg"
        alt="..." class="img-responsive">
    </a>
</div>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <img src="" id="imagepreview"  >
      </div>
    </div>
  </div>
</div>

使用Javascript：

@media only screen and (min-device-width : 768px) {
    .productbox, .subproduct {
        background-color: black;
    }
    .subproduct>img {
        height: 20%;
        width: 20%;
    }
}

请告诉我这里缺少的东西。感谢

更新我有模态和模态图像工作。但现在模型窗口就是问题所在。

我的网页上有各种尺寸的图像，因此模态窗口的尺寸会根据图像大小而变化，并且会在不同的屏幕位置（垂直和水平轴）上对齐。

如何设置模态的大小，使其与图像尺寸无关。我可以将图像缩放到可用的div区域。

我在此链接创建了一个示例视图：jsfiddle 这是更新的代码。 HTML：

$(document).ready(function() {

    $(".subproduct2").click(function(elem) {
     $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
        $('#imagemodal').modal('show'); 
        });
    });

使用Javascript：

<div class="col-lg-3">
    <a href="#" class="subproduct1 subproduct thumbnail">
        <div class="caption">
            <h4 class="">CBS Star Gaze</h4>
        </div> <img
        src="https://cbsla.files.wordpress.com/2013/08/72371116.jpg"
        alt="..." class="img-responsive">
    </a>
</div>
<div class="col-lg-3">
    <a href="#" class="subproduct2 subproduct  thumbnail">
        <div class="caption">
            <h4 class="">Universal Studios</h4>
        </div> <img src="http://www.lastrawberryfest.com/wp-content/uploads/2013/02/Travel-to-the-Heart-of-Los-Angeles-Best-places-to-visit.jpg"
        alt="..." class="img-responsive">
    </a>
</div>
<div class="col-lg-3">
    <a href="#" class="subproduct3 subproduct  thumbnail">
        <div class="caption">
            <h4 class="">Disney Land</h4>
        </div> <img
        src="http://www.topplacestotravel.net/gallery/places-to-visit-in-los-angeles/disneyland_and_california_adventure_los_angeles.jpg"
        alt="..." class="img-responsive">
    </a>
</div>

<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        <img src="" id="imagepreview"  >
      </div>
    </div>
  </div>
</div>

CSS：

$(document).ready(function() {

  $(".subproduct1").click(function(elem) {
         $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
        $('#imagemodal').modal('show');
    });

    $(".subproduct2").click(function(e) {
        $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
         $('#imagemodal').modal('show');
    });

    $(".subproduct3").click(function(e) {
        $('#imagepreview').attr('src', $(this).find( "IMG" ).prop('src'));
         $('#imagemodal').modal('show');
    });
    });

Answer 1

只需将图片width设置为100%即可。由于您的图片只有imagepreview ID，因此只需添加到您的css：

#imagepreview {
  width: 100%;
}

将图像调整为自举模式窗口

1 个答案: