It Wont Let Me Upload a Responsive Logo

The majority of today's websites are responsive. And if you lot need to center and marshal image on those site, you lot need to learn how to make images fluid or responsive with CSS.

I posted a tutorial video that explains how to make a responsive website step by step a couple of weeks agone. In the video we made an prototype responsive. But in this postal service, I would like to give a bit more detail nearly how to make images responsive.

You lot volition likewise learn some of the full general problems that can occur when you're trying to make images responsive – and I will effort to explicate how to solve them.

How to Make Images Responsive with CSS

Should I Utilise Relative or Absolute Units?

Making an image fluid, or responsive, is really pretty uncomplicated. When you upload an image to your website, it has a default width and height. You tin change them both with CSS.

To make an image responsive, you need to give a new value to its width property. And then the height of the image volition adjust itself automatically.

The important affair to know is that y'all should always apply relative units for the width property like percentage, rather than absolute ones similar pixels.

                img {   width: 500px; }              

For example, if you define a fixed width of 500px, your image won't be responsive – because the unit is absolute.

                img {   width: l%; }              

That'southward why y'all should instead assign a relative unit of measurement like l%. This approach volition make your images fluid and they will be able to resize themselves regardless of the screen size.

Should I Employ Media Queries?

One of the questions I get asked the about is whether you should use media queries or not.

A media query is another important feature of CSS that helps make a website responsive. I won't go into further details hither only you can read my other mail service afterwards to larn how to use media queries in more particular.

The answer to that question is: "it depends". If you want your image to have different sizes from i device to another, then you volition demand to use media queries. Otherwise, you won't.

At present for this case, your image has a 50% width for any kind of screen. But when you desire to make it full-size for mobile devices you need to become help from media queries:

                @media only screen and (max-width: 480px) {   img {     width: 100%;   } }              

So based on the media query rule, any device smaller than 480px volition take the total size of the width of the screen.

Y'all can also picket the video version of this postal service below:

Why is the max-width property non neat?

Another way that developers can make responsive images is the max-width property. However, this is non ever the best method to use, because information technology may not work for every kind of screen size or device.

The first thing to understand earlier nosotros move on with an case is what exactly the max-width belongings does.

The max-width holding sets a maximum width for an element, which does non allow the width of that element to be larger than its max-width value (but information technology can exist smaller).

For instance, if the image has a default width of 500px, and if your screen size has only 360px, so you lot won't exist able to meet the complete image, because in that location is not enough infinite:

                img {   max-width: 100%;   width: 500px;  // assume this is the default size }              

Therefore, you tin define a max-width property for the image and gear up it to 100%, which shrinks the prototype of 500px to the space of 360px. So you will be able to see the complete image on a smaller size screen.

The skillful affair is that, since you are using a relative unit, the image will be fluid in any device smaller than 500px.

Unfortunately, the screen size volition get somewhat larger than 500px, but the image won't because it has a default 500px of width. This approach volition break the responsiveness of the paradigm.

To set up this, y'all demand to use the width property again, which makes the max-width property useless.

What about Heights?

Another common problem you may run across has to do with the superlative property. Ordinarily, the height of an epitome automatically resizes itself, so you don't need to assign a height property to your images (because information technology kinda breaks the epitome).

But in some cases, you lot might accept to piece of work with images that must have a fixed-elevation. And then when you assign a fixed pinnacle to the epitome, it volition still be responsive only it won't await practiced.

                img {   width: 100%;   pinnacle: 300px; }              

Fortunately, there is some other property that CSS offers to fix this trouble…

Solution: The Object-Fit Holding

To have more control over your images, CSS provides another property called object-fit. Let's use the object-fit holding and assign a value, which will brand your prototype look meliorate:

                img {   width: 100%;   height: 300px;   object-fit: cover;   object-position: bottom; }              

If needed, y'all can also employ the object-position property (in addition to object-fit) to focus on a specific part of the image. Many people are not enlightened of the object-fit property, simply it can exist helpful to fix these kinds of problems.

I hope this postal service has helped you lot empathize and solve your problems with responsive images. If you want to acquire more about web development, feel gratuitous to cheque out my Youtube channel.

Give thanks yous for reading!

---

---

Larn to code for free. freeCodeCamp's open source curriculum has helped more than twoscore,000 people get jobs as developers. Get started

amendolaanorthems.blogspot.com

Source: https://www.freecodecamp.org/news/css-responsive-image-tutorial/

Share this post