Create Fluid Background Image with CSS

Question

I am trying to build a simple fluid image that can resize based on screen size.

But I am having trouble to get the image smaller when the width of the browser gets smaller.

HTML:

<main>
    <section class="slider-ctn">
        <figure class="logo"></figure>
    </section>
</main>

CSS:

.slider-ctn figure.logo {
    margin: auto;
    background-image: url('../Images/logo.200x100.png');
    width: 200px;
    height: 100px;
}

Answer 1

If you set the background-size to 100% 100% or cover the image will stretch to fit the container. Remove the width (or restrict the width by setting the parent's width) and set height: 0; padding-top: 50% height: 0; padding-top: 50% on the figure to make the height of the figure half of the width, so the aspect ratio will match the image and be fluid.

 * {margin:0;padding:0;} .slider-ctn { margin: auto; width: 200px; } .slider-ctn figure.logo { background: url('https://dummyimage.com/200x100/000/fff') top left no-repeat; height: 0; background-size: cover; padding-top: 50%; } 

 <main> <section class="slider-ctn"> <figure class="logo"></figure> </section> </main> 

Answer 2

只需使用以下代码将以下内容添加到您的head标签中：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 3

You should add contain as background-size to your CSS:

.slider-ctn figure.logo {
  margin: auto;
  background-image: url('../Images/logo.200x100.png');
  background-position:center center;
  background-repeat:no-repeat;
  background-size:contain;
  width: 200px;
  max-width:100%;
  height: 100px;
  display:inline-block;
}

Don't forgot to add position and repeat to background properties everytime when you use background images.

Also I added max-width to fit within the parent container if it is smaller than the logo container.

Example here

NOTE: Don't use cover in background-size because that will cut your logo to fit only within width limits, contain will fit width and height .

Answer 4

Another option using vw units and contain.

If you know the aspect ratio of your image you can use vw (view width) as your units for width and height.

I am using an image that has a 4x3 aspect ratio. If I want the width to always be 80% of the screen I will use 80vw. Then, my height will be 3/4 of my width, or 60vw.

Then be sure to use contain for your background sizing.

Try this css and see if it satisfies your needs:

.slider-ctn figure.logo { margin: auto; background-image: url('https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg'); background-size: contain; background-repeat: no-repeat; width: 80vw; height: 60vw; border: 5px solid red; }

Answer 5

I think setting up the max-width of the image to 100% should do the trick.

.slider-ctn figure.logo {
  background-image: url('../Images/logo.200x100.png');
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  width: 200px;
  height: 100px;
}