CODEWITHSUNDEEP
htmlcssimageresponsiveimage-resizing
Zanic L3
Zanic L3

Reputation: 1088

CSS - Image scaling but from the right?

article img {
    width: 100%;
    height: 350px;
    -o-object-fit: cover;
    object-fit: cover;
}
<article>
  <img src="https://i.ibb.co/84FnVcK/Group.png">
</article>

Is it possible to keep the 'This needs visible' text on the image to stay there? So the image scales from a different angle? Note: The this needs visible is actually a logo on some images and the logo falls off when the window is getting smaller (responsive)

Here the text falls off

enter image description here

Upvotes: 0

Views: 438

Answers (1)

Hao Wu
Hao Wu

Reputation: 20824

Try giving it object-position: left center, much like background-position, it determines the anchor point when the image needs to be scaled.

article img {
    width: 400px;
    height: 600px;
    -o-object-fit: cover;
    object-fit: cover;
    object-position: left center;
}
<article>
  <img src="https://i.ibb.co/84FnVcK/Group.png">
</article>

Upvotes: 2

Related Questions