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

CSS image resize and blank bottom area – SEO

So, in my previous post I was asking how I can diplay a 500x500 image, with that image to only be resized towards the x axis and not y.

.image { 
    border: 1px solid blue;
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    width: auto;
    height: 500px;
    max-width: 100%;
}

I use border to understand a bit better the borders of the image. I tested this and works fine except for the fact that when I resize it towards the x axis it’s indeed resized but it gives a blank area at the bottom:

enter image description here

How can I fix this so no blank bottom area appears, the border to fit always the image? Ty

Tags:

2

Answers


  1. 0

    The width of your container is not 500px, so therefore the background image is being reduced in height to maintain its aspect ratio. If you would like to entirely fill the <div>, you can use background-size: cover, as follows:

    .image { 
    border: 1px solid blue;
    background-image: url('http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg');
    background-position: center top;
    background-repeat: no-repeat;
    background-size: cover;
    width: auto;
    height: 500px;
    max-width: 100%;
}
    <div class="image"></div>
    Login or Signup to reply.
  2. 0

    Perhaps use img tag and make this img responsive? here is my solution:
    https://jsfiddle.net/7rwp5jf4/
    Html:

    <div>
 <img src="http://www.seedsavers.org/site/img/SEO%20Images/0841-benarys-giant-zinnia-flower.jpg">
</div>

    Css:

    DIV { 
    border: 1px solid blue;
    width: auto;
    height: 500px;
    max-width: 100%;
}
div img{
    width:100%;
    height:auto;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search