Member Avatar for misterx100

Hi,

I have a div, which contains another div, which contains a image, like so:

<div class="div1">
      <div class="div2">
      </div>
</div>

.div1-le has the following CSS:

height:100%;
width:100%;
margin:0;
padding:0;
position:fixed;

This means that .div1 is the same size as the browser. Now, what I need, is .div2 to be X number of pixles from each side of the browser.

Thanks!

  • 4 Contributors
  • 15 Replies
  • 314 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by bikercyber

Dani AI

Generated

A modern, CSS-only way to make the image resize to "viewport minus X pixels" (instead of using JS) is to use viewport units plus calc() (and a CSS variable for the gap). This builds on 's padding idea and gives the precise sizing asked for — while avoiding the overflow gotcha that happens when padding is added to an element already set to 100% width (use box-sizing: border-box).

:root { --gap: 20px; /* X pixels from each side */ }

.div1 { box-sizing: border-box; padding: var(--gap); }

.div2 img {
  max-width: calc(100vw - (var(--gap) * 2));
  max-height: calc(100vh - (var(--gap) * 2));
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain; /* use 'cover' if filling+cropping is wanted */
}

Notes and troubleshooting:

  • max-width + max-height preserves the image aspect ratio; object-fit is only needed when both width and height are explicitly constrained and a fill/crop behavior is desired.
  • If .div1 is fixed/fullscreen, box-sizing: border-box ensures the padding stays inside the viewport so the element does not cause horizontal scroll.
  • For older browsers that lack calc()/viewport units, fall back to a simple responsive rule like img { max-width:100%; height:auto; } or use a tiny JS/jQuery resize handler to set widths from window.innerWidth - 2*X (debounce the resize event for performance).
  • If the image is purely decorative, consider background-image with padding + background-size: cover as an alternative.

This gives a clean CSS-only solution now (where earlier answers thought JS was required), and still allows the jQuery approach suggested by if older-browser support is necessary.

Recommended Answers

All 15 Replies

Member Avatar for shaya4207

Give .div1 a padding-left & padding-right the amount of px you want

Member Avatar for misterx100

Oh, dumb me! I never had a idea to change something in .div1 properties. I'll try it and report back in 15 minutes. Thanks!!

Member Avatar for shaya4207

no problem, hope it works

Member Avatar for misterx100

It doesn't :( I forgot to tell, that there is also a really big image (bigger than my screen) inside .div2. Sorry.

Member Avatar for shaya4207

So how do you expect div2 to be smaller than the screen?

Member Avatar for misterx100

I must shrink the image smaller.

Member Avatar for shaya4207

Yep, and that's not going to happen by making the div containing it smaller

Member Avatar for misterx100

But how can I make the image width or height 100% of window size - X amount of pixels?

Member Avatar for shaya4207

Probably with JavaScript you can do something like calculate the amount pixels on the screen, and minus the sides, I believe that wouldn't be very easy...

Member Avatar for misterx100

I think it would be quite easy with jQuery, but I'm looking for a CSS-only solution.

Member Avatar for shaya4207

Not as far as I know

Member Avatar for misterx100

Jquery has built-in height() and width() properties, I've seen it in action. It's not that hard. But I still need a CSS-only solution.

Edited by misterx100 because: n/a
Member Avatar for shaya4207

Oke doke, Good luck finding that...

Member Avatar for bkimbriel

If I'm understanding this correct you simply want the .div2 to be a certain amount of pixels away from side?

.div1 {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
position: absolute;
}

.div2 {
position: relative;
top: Xpx;
left: Xpx;
right: Xpx;
width: Xpx;
height: Xpx;
}

or if you just want it centered take off the left and right and just do margin: 0 auto;

That'll basically do it as long as .div2 has a width / height less than 100%.

EDIT:

Wait, so you have an image placed in .div2 that you want to be shrunk depending on the users screen resolution? There is no CSS solution to do that for ya.

Edited by bkimbriel because: n/a
Member Avatar for bikercyber

Wow, great .thank you.
Do you have editor recommend for edit CSS.? please tell me .What`best for edit CSS?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.