CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Harish Soni
Harish Soni

Reputation: 1896

Can not give 100% height to transformed image?

I am unable to apply the height of a transformed element to it's parent. I have a bootstrap modal in which I am rendering an image that may be very large in size or may be small the size of the image is dynamic. So what I want is that whatever the size of image is the modal's size should also be same as the transformed Image.

I tried giving it a max-height: 100% but it does not works. If I give it max-height in px then modal height will always cut if the height of my image is greater than my max-height so suggest me what to do.

Following is JSFiddle which is demonstrating my problem.

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

When you will open the modal the height of the modal is very large and the image inside it it much smaller after tranformation.

Any help would be appreciated.

HTML:: Bootstrap Example

<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%;
}

Upvotes: 0

Views: 147

Answers (2)

Ganesh Putta
Ganesh Putta

Reputation: 2671

try this, just remove css from your code, and add img-responsive to the image tag, then it works fine. any size of the image works fine here.

I added three types images to show height as u mentioned.

<!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>

Upvotes: 1

wiiiiilllllll
wiiiiilllllll

Reputation: 577

If I understand your requirements correctly, you can achieve this without any extra CSS, just using Bootstrap's helper classes: change the img class to class="modal-image img-responsive center-block".

Updated JSfiddle with a 100px image: https://jsfiddle.net/y2b96spb/1/

and a 3000px image: https://jsfiddle.net/e52uafd4/

Upvotes: 2

Related Questions