serenity/Tests/LibWeb/Ref/object-fit-position.html

<link rel="match" href="reference/object-fit-position-ref.html"/>
<style>
    .images img {
        border: 1px solid black;
    }

    .img-wrapper {
        margin-left: 20px;

    }

    .fit-cover .images img {
        object-fit: cover;
    }

    .fit-contain .images img {
        object-fit: contain;
    }

    .fit-fill .images img {
        object-fit: fill;
    }

    .fit-none .images img {
        object-fit: none;
    }

    .wider img {
        width: 100px;
        height: 50px;
    }

    .taller img {
        width: 50px;
        height: 100px;
    }

    img.pos-left {
        object-position: left;
    }

    img.pos-right {
        object-position: right;
    }

    img.pos-top {
        object-position: top;
    }

    img.pos-bottom {
        object-position: bottom;
    }

    img.pos-center {
        object-position: bottom;
    }

    img.pos-absolute {
        object-position: 20px 30%;
    }

</style>
<h2>Object-Fit: Cover</h2>
<div class="fit-cover">
  <h3>Box wider</h3>
  <div class="wider images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
  <h3>Box taller</h3>
  <div class="taller images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
</div>


<h2>Object-Fit: contain</h2>
<div class="fit-contain">
  <h3>Box wider</h3>
  <div class="wider images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
  <h3>Box taller</h3>
  <div class="taller images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
</div>


<h2>Object-Fit: fill</h2>
<div class="fit-fill">
  <h3>Box wider</h3>
  <div class="wider images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
  <h3>Box taller</h3>
  <div class="taller images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
</div>


<h2>Object-Fit: none</h2>
<div class="fit-none">
  <h3>Box wider</h3>
  <div class="wider images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
  <h3>Box taller</h3>
  <div class="taller images">
    <div class="img-wrapper">
      <h6>Object-Position: Left</h6>
      <img class="pos-left" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Right</h6>
      <img class="pos-right" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Top</h6>
      <img class="pos-top" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Bottom</h6>
      <img class="pos-bottom" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: Center</h6>
      <img class="pos-center" src="assets/car.png">
    </div>
    <div class="img-wrapper">
      <h6>Object-Position: 20px 30%</h6>
      <img class="pos-absolute" src="assets/car.png">
    </div>
  </div>
</div>