seo Question posted in
Some basic information to get you started with this can be found here.

Responsive rectangle with image fit to maximum size while keeping aspect ratio – SEO

I’m trying to create a responsive rectangle that has:

  1. height that is 62% of width
  2. background: linear-gradient
  3. inside the rectangle is an image centered vertically and horizontally with a maximum size, all images have the same width: 400px but a different height

What I have done before:

  1. for getting responsive 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>

jsfiddle

  1. to align the image inside rectangle I have used display: flex; and text-align:center; with an .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>

jsfiddle

This works perfect in case with image 400px x 220px,
but with images that have a bigger height the correct 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>

jsfiddle

Is there any approach that can solve my problem?

Edit:
Oh I forgot to note that background-image is not good solution because it does not support SEO.

Tags:

2

Answers


  1. 0

    I had to lay them out next to each other to see the issue. Here is a solution to your problem, just use the image as a background:

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

    and then center it

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

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

    Login or Signup to reply.
  2. 0

    The problem with your final code is that the pseudo element used for keeping the aspect ratio is not actually performing its desired role. This is because .responsive-rectangle is set to display: flex;. To maintain the aspect ratio you can make the following modifications:

    • Remove the .responsive-rectangle:before rule as the calculation can be done on .image-wrapper itself
    • Remove display: flex; from .responsive-rectangle
    • Remove the existing rules for .image-wrapper and replace them with:
      • padding-top: 62%; to ensure the correct aspect ratio is used
      • position: relative; to allow img to be positioned relative to .image-wrapper
      • width: 100%; to ensure it will fill the entire width of .responsive-rectangle
    • Remove the existing rules for img and replace them with:
      • bottom: 0;, left: 0;, margin: auto;, right: 0; and top: 0; to allow the image to be centered in .image-wrapper
      • position: absolute; to position it relative to .image-wrapper
      • max-height: 100%; and max-width: 100%; to ensure the image does not exceed its natural height and width while keeping its aspect ratio
    .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>

    http://jsfiddle.net/p23pgqp3/

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search