Question 45544 in CSS Question posted in
Some basic documentation can be found here.

Fit image inside flexible Div box without distorting image – CSS

Trying to fit an image inside a Div box that changes dimensions according to screen size. Still new to this.

I need this image to always keep it’s proportion and be cropped by the Div box that may be vertical or horizontal. Preferably I want the Image to be centered on the Div box and with a 5px bleed.

Optionally, is it also possible to set a focus point on the image so that point is what is centered when Div box changes size?

Many thanks!

Here’s my current code, where to improve so that Image gets cropped by Div?

body {
  background: white;
  display: flex;
  height: 100vh;
}

div {
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background: #f0e8e6;
  overflow: hidden;
  margin: auto;
  display: flex;
}

#container {
  max-width: auto;
  overflow: hidden;
}

img {
  width: calc(100% - 5px);
  /* wrong calc? */
  object-fit: contain;
}
<body>

  <div>

    <img src="https://euclois.xyz/desert-statue.jpg">


  </div>

  <style type="text/css">
    html,
    body {
      margin: 0;
      height: 100%;
      overflow: hidden
    }
  </style>

</body>

enter image description here

Tags:

4

Answers


  1. 0

    I think using object-fit: cover on the img tag will do instead of contain. Is this what you wanted to do: https://codesandbox.io/s/object-fit-issue-0n63py

    Login or Signup to reply.
  2. 0

    use object-fit: cover; for the img class, you have used contain.
    See here all possible values for object-fit https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    Login or Signup to reply.
  3. 0

    add object-fit: cover on the image and also, instead of -5 width on the image, try padding on the wrapping div,

    
div {
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  background: #f0e8e6;
  overflow: hidden;
  margin: auto;
  display: flex;
  padding: 5px;
}
    Login or Signup to reply.
  4. 0

    This will work best as a CSS background.

    • background-size: cover will expand/shrink the image to cover the entire background without distorting the aspect ratio.
    • The 5px "bleed" is achieved with a combination of padding: 5px, background-clip: content-box, and background-origin: border-box.
    • The "focal point" can be adjusted with background-position or background-position-x and background-position-y.
    body {
  background: white;
  display: flex;
  height: 100vh;
}

div {
  width: calc(100% - 50px);
  height: calc(100% - 50px);
  overflow: hidden;
  margin: auto;
  display: flex;
  padding: 5px;
  background-clip: content-box;
  background-color: #f0e8e6;
  background-image: url("https://euclois.xyz/desert-statue.jpg");
  background-origin: border-box;
  background-repeat: no-repeat;
  background-position-x: 60%;
  background-position-y: 35%;
  background-size: cover;
}

#container {
  max-width: auto;
  overflow: hidden;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden
}
    <body>

  <div></div>

</body>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search