Img inside div goes outside screen-CodePudding

I have 3 images and want the one in the middle to be centered, was thinking about making absolute the image inside a relative div and apply percentages, left 50% and i thought i'll be in the middle but is more to the right As you can see at 50% is doesn't look centered

And when i apply 100% is goes outside the screen

Can it be done with percentages? Tried to put some margins but didn't work.

h1 {
  display: block;
  background-color: yellow;
  text-align: center;
}

.objectfitt {
  position: relative;
}

.objectfitt img {
  width: 300px;
  height: 500px;
  margin-top: 50px;
  display: flex;
  display: inline-block;
}

.objectfitt .cov {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border: 3px solid red;
}

.objectfitt .cont {
  height: 300px;
  width: 300px;
  object-fit: contain;
  border: 3px solid aqua;
  position: absolute;
  left: 100%;
}

.objectfitt .fill {
  object-fit: fill;
  border: 3px solid yellow;
  height: 300px;
  width: 300px;
  float: right;
}

<h1>Text</h1>
<div >
  <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
  <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
  <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
</div>

CodePudding user response：

Just use flexbox on objectfitt, not the images, and set the justify-content property to space-between:

h1 {
  display: block;
  background-color: yellow;
  text-align: center;
}

.objectfitt {
  display: flex;
  justify-content: space-between;
}

.objectfitt img {
  width: 300px;
  height: 500px;
  margin-top: 50px;
}

.objectfitt .cov {
  height: 300px;
  width: 300px;
  border: 3px solid red;
}

.objectfitt .cont {
  height: 300px;
  width: 300px;
  object-fit: contain;
  border: 3px solid aqua;
  left: 100%;
}

.objectfitt .fill {
  object-fit: fill;
  border: 3px solid yellow;
  height: 300px;
  width: 300px;
  float: right;
}

<h1>Text</h1>
<div >
  <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
  <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
  <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
</div>

CodePudding user response：

I hope I understood correctly.

You have 3 images and you want them centered. is it correct?

h1 {
    display: block;
    background-color: yellow;
    text-align: center;
}
.objectfitt {
  float:left;
  width:100%;
    position: relative;
    display: flex;
    align-items: center;
    align-content: stretch;
    justify-content: space-evenly;
    flex-direction: row;
    flex-wrap: nowrap;
}

.objectfitt .cov { 
    height: 300px;
    width: 300px;
    object-fit: cover;
    border: 3px solid red;
}

.objectfitt .cont { 
    height: 300px;
    width: 300px;
    object-fit: contain;
    border: 3px solid aqua;
    left: 100%;
}

.objectfitt .fill { 
    object-fit: fill;
    border: 3px solid yellow;
    height: 300px;
    width: 300px;
    float: right;
}

<!DOCTYPE html>
<html>
  
<head>
  <title>ObjectFit</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <h1>Text</h1>
  <div >
    <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
    <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
    <img  src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
  </div>
</body>
</html>