Html Question posted in
Some basic documentation can be found here.

Html – How to display img like backgroundimage using object-position with overflow: clip. I guess there is noway. maybe already asked but search power is low

How to display img like backgroundimage using object-position with overflow: clip. I guess there is noway. (maybe already asked but my search power is low.)

Should I use backgroundimage or maybe…?

.img-container:first-child img {
  width: 400%;
  height: 400%;
  object-fit: contain;
  object-position: top 100px;
}

.img-container a {
  width: 100%;
  height: 100%;
  overflow: clip;
}
<ul class="blue-edge-parent">
  <li class="img-container">
    <a href="privacy"><img src="privacy" alt="privacy">
      <p>privacy</p>
    </a>
  </li>
  <li class="img-container">
    <a href="privacy"><img src="privacy" alt="privacy">
      <p>privacy</p>
    </a>
  </li>
  <li class="img-container measure-trans-parent">
    <a href="privacy"><img src="privacy" alt="privacy">
      <p>privacy</p>
    </a>
  </li>
</ul>

I guessed there need object-fit but it doesn’t work.
And I thought there must be content is smaller than parent.

I’m sorry. I want to use tab key but I couldn’t.

P.S
enter image description here

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally it moved. I'm sorry for my noob action. It didn't work because I didn't set both top and left. Thanks for everyone that take parted. :D


  2. 0

    OK my final answer that taught is clip the image (by any tool and EACH IMAGE!)
    to make offset and scale the image. Try this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search