Question

我无法将变换后的元素的高度应用于它的父级。我有一个自举模式，其中我渲染的图像可能非常大，或者可能是图像的大小是动态的。所以我想要的是，无论图像大小如何，模态的大小也应该与变换后的图像相同。

我试过给它一个max-height: 100%，但它不起作用。如果我在px中给出最大高度，那么如果我的图像高度大于我的max-height，模态高度将始终减少，所以建议我做什么。

以下是JSFiddle，它正在展示我的问题。

https://jsfiddle.net/harish_soni/6r9p07sg/

当你打开模态时，模态的高度非常大，变形后它里面的图像要小得多。

任何帮助都将不胜感激。

HTML： ： Bootstrap示例

<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <img class="modal-image" src="http://canacopegdl.com/images/example/example-1.jpg" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

</div>

</body>

CSS：

.modal-image{
    transform: scale(0.3) translateX(-50%);
    transform-origin: left top;
    position: relative;
    left: 50%;
}

Answer 1

如果我正确理解了您的要求，您可以在没有任何额外CSS的情况下实现此目的，只需使用Bootstrap的帮助程序类：将img类更改为class="modal-image img-responsive center-block"。

使用100px图像更新了JSfiddle：https://jsfiddle.net/y2b96spb/1/

和3000px图片：https://jsfiddle.net/e52uafd4/

Answer 2

试试这个，只需从代码中删除css，然后添加img-responsive到图像标记，然后就可以了。任何尺寸的图像在这里工作正常。

我添加了三种类型的图像来显示你提到的高度。

＆＃13;

<!DOCTYPE html>
  <title>Bootstrap Example</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal2">Open Modal 2</button>
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal3">Open Modal 3</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" style="text-align:center;"> 
          <img class="modal-image center-block img-responsive" src="http://canacopegdl.com/images/example/example-1.jpg" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
  <!-- Modal -->
  <div class="modal fade" id="myModal2" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" style="text-align:center;"> 
          <img class="modal-image center-block img-responsive" src="https://upload.wikimedia.org/wikipedia/commons/8/85/Codero_Hosting_Logo_%28100px%29.png" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
  <!-- Modal -->
  <div class="modal fade" id="myModal3" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body" style="text-align:center;"> 
          <img class="modal-image center-block img-responsive" src="https://i.pinimg.com/736x/13/4f/d3/134fd3ea8c942b853f0735fc84f0297b--pink-flamingos-beautiful-creatures.jpg" />
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>

＆＃13;

转换后的图像不能给出100％的高度？

2 个答案: