JSFiddle - React, Tailwind, and code Playground

by memel

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<button class="resize" data-width="500">Resize 500px</button> <button class="resize" data-width="350">Resize 350px</button> <button class="resize" data-width="250">Resize 250px</button> <button class="position">Change position</button>

<div id="carousel" class="carousel slide">
  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://farm4.staticflickr.com/3725/8784075967_8ba61f41af.jpg" />
      <div class="resizable">
          Element Position Absolute
      </div>
      <div class="carousel-caption">
        First image
      </div>
    </div>
    <div class="item">
      <img src="http://farm6.staticflickr.com/5340/8794653478_491f5dacb7.jpg" />
      <div class="carousel-caption">
        Seconde image
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel" data-slide="prev">
    <span class="icon-prev"></span>
  </a>
  <a class="right carousel-control" href="#carousel" data-slide="next">
    <span class="icon-next"></span>
  </a>
</div>

CSS

#carousel {
    position:absolute;
    top: 50%;
    left: 50%;
    margin-top:-166.666px;
    margin-left: -250px;
    width:500px;
    height:333px;
}

.resizable {
    position:absolute;
    background: red;
    top:20%;
    left:40%;
    width: 200px;
    height: 100px;
    margin-left: -100px;
    margin-top: -50px;
    font-size:0.8em;
}

JavaScript

$('.resize').on('click', function() {
    var width = $(this).data('width');
    $('#carousel').resizer(width);
});

$('.position').on('click', function() {
    $('#carousel').css({
        'left': Math.floor(Math.random() * 100) + '%',
        'top': Math.floor(Math.random() * 50) + 50 + '%'
    });
});

jQuery.fn.extend({
    resizer: function(width) {
        var ratio, height, scaleRatio;
        
        // Define ratio        
        ratio = 1 / (this.width() / this.height());
        
        // Define scaling ratio
        scaleRatio = width / this.width();
                        
        // Resize main element
        this.width(width);
        this.height(ratio * width);
        
        // Update position
        this.css('margin-left', -this.width() / 2 );
        this.css('margin-top', -this.height() / 2 );
        
        // Resize children
        this.find('.resizable').each(function() {
           $(this).resizer($(this).width() * scaleRatio);
        });
    }        
});