Responsive rectangle with maximum image size while maintaining aspect ratio

Question

I am trying to create a responsive rectangle that has:

• heightthat is 62% of width
• background: linear-gradient
• inside the rectangle - the image is centered vertically and horizontally with the maximum size, all images have the same width: 400pxbut differentheight

What I did before:

• to get the response rectangle I used this approach:

.responsive-rectangle {
  width: 100%;
  max-width: 450px;
  background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
}
.responsive-rectangle:before {
  content: "";
  display: block;
  padding-top: 62%;
}

<div class="responsive-rectangle"></div>

Run codeHide result

jsfiddle

2. to align inside the rectangle image I have used display: flex;and text-align:center;to .img-wrapper:

.responsive-rectangle {
  width: 100%;
  max-width: 450px;
  background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
  display: flex;
  text-align: center;
}
.responsive-rectangle:before {
  content: "";
  display: block;
  padding-top: 62%;
}
.image-wrapper {
  margin: auto;
}
img {
  width: 100%;
  height: 100%;
}

<div class="responsive-rectangle">
  <div class="image-wrapper">
    <img src="https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png" alt="">
  </div>
</div>

Run codeHide result

jsfiddle

This works great in the case of an image 400px x 220px, but with images with large, the heightcorrect aspect ratio is not used:

.responsive-rectangle {
  width: 100%;
  max-width: 450px;
  background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
  background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
  display: flex;
  text-align: center;
}
.responsive-rectangle:before {
  content: "";
  display: block;
  padding-top: 62%;
}
.image-wrapper {
  margin: auto;
}
img {
  width: 100%;
  height: 100%;
}

<div class="responsive-rectangle">
  <div class="image-wrapper">
    <img src="https://res.cloudinary.com/zeek/image/upload/v1444889083/o67qntlwitbxnqz5qyjn.png" alt="">
  </div>
</div>

Run codeHide result

jsfiddle

Is there any approach that can solve my problem?

Edit: , , background-image , SEO.

Answer 1

, , , . , .responsive-rectangle display: flex;. , :

• .responsive-rectangle:before, .image-wrapper
• display: flex; .responsive-rectangle
• .image-wrapper :
  • padding-top: 62%;, .
  • position: relative;, img .image-wrapper
  • width: 100%;, .responsive-rectangle
• img :
  • bottom: 0;, left: 0;, margin: auto;, right: 0; top: 0;, .image-wrapper
  • position: absolute;, .image-wrapper
  • max-height: 100%; max-width: 100%;, height width,

.responsive-rectangle {
    background: -webkit-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
    background: -moz-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
    background: -o-linear-gradient(bottom, #0071B4, rgba(0, 113, 180, .8));
    background: linear-gradient(to top, #0071B4, rgba(0, 113, 180, .8));
    float: left;
    margin: 0 5px;
    max-width: 450px;
    text-align:center;
    width: 100%;
}
.image-wrapper {
    padding-top: 62%;
    position: relative;
    width: 100%;
}
img {
    bottom: 0;
    left: 0;
    margin: auto;
    max-height: 100%;
    max-width: 100%;
    right: 0;
    position: absolute;
    top: 0;
}

<div class="responsive-rectangle">
    <div class="image-wrapper">
        <img src="https://res.cloudinary.com/zeek/image/upload/v1444889083/o67qntlwitbxnqz5qyjn.png" alt="">
    </div>
</div>
<div class="responsive-rectangle">
    <div class="image-wrapper">
        <img src="https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png" alt="">
    </div>
</div>

Hide result

http://jsfiddle.net/p23pgqp3/

Answer 2

, . , :

<div class="image-wrapper" style="background-image:url('https://res.cloudinary.com/zeek/image/upload/v1429436724/whiterryxmsuesx78joy9n9sa.png')"></div>

.image-wrapper {
    background-repeat: no-repeat;
    width: 100%;
    background-size: contain;
    background-position: center center;
}

http://jsfiddle.net/bmdqsqx1/1/