Centering picture element for larger screen sizes

DV1

Joined
May 22, 2022
Messages
6
Reaction score
0
Hi Everyone

I'm using the picture element which most of you know as in this example:

Code:
<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>


The page I'm using it on is basically a front page with only an image and some text below it. The coding is easy in that I don't have to do anything with 'banner', 'header', etc. Here's a quick sketch:

img-centering.jpg

When making a page I usually check it in one of the many websites that shows how a page looks in different sizes and devices. Scaling down everything is in place all the way to phone screen. But when I checked this page it in larger screens up tp 24" then the image slides to the left as shown on the image to the right.

I have the img tag css as:

Code:
img {
    max-width: 100%;
    height: auto;
    margin: 1% auto 0 auto;
}

That usually works for centering at any size but in this instance it doesn't. I also used text-align but nothing likewise.

Does picture element require something different? Should I put everything in a container or wrapper and center that?

Any suggestions appreciated.

Daniel
 
Joined
Jul 4, 2023
Messages
341
Reaction score
39
Did you tried ...
[ on-line ]
CSS:
img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1% auto 0 auto;
    object-fit: cover;
}
 

DV1

Joined
May 22, 2022
Messages
6
Reaction score
0
@VBService

Thank you for responding.

I was going to get around to posting today saying that I found the way to do this but then I saw the email notification of your response. I decided to try out your method and am glad to report that it also works.

The way I did it was basically an afterthought of what I mentioned in the OP re a content container:

Code:
.content {
  max-width: 1600px;
  margin: auto;
  background: #555;
  padding: 10px;
}

I then just made a div:

Code:
<body>
<div class="content">
................
................
................

</div>

</body>
</html>

Looking good at any size. :)

I checked the results at https://screenfly.org/

It's one of many websites to check that one's website is centered especially with larger screen sizes.

Thank You

Daniel
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,708
Messages
2,569,347
Members
44,654
Latest member
7Jhamal74

Latest Threads

Top