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

Show a part of image but with full width – Html

I want to show an image but only a part of it and with a full (100% width), with no overflow

This is my code and it doesn’t works:

.intro_sea {
  position: absolute;
  width: 101%;
  clip-path: inset(30% 50% 0 0);
  margin: 0;
  padding: 0;
  bottom: 0;
}
<img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161357.png" alt="huh" />
<img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161403.png" />
<img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161409.png" />

Sorry for the messy code, I’m on mobile.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    This works well:

    .intro_sea {
  position: absolute;
  min-width: 150%;
  max-width: 170%;
  max-height: 50%;
  margin: 0;
  padding: 0;
  bottom: 0;
  object-fit: cover;
}

.intro_seadiv {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #0099FF;
  overflow: hidden;
}
    <div class="intro_seadiv">
  <img src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161357.png" alt="huh" class="intro_sea">
  <img src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161403.png" class="intro_sea">
  <img src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161409.png" class="intro_sea">
</div>


  2. 0

    Is it what you want?

    .img_wrap{
  position:relative;
  width:100%;
  height:300px;
  border:solid 1px blue;
}
.intro_sea {
  position: absolute;
  width: 100%;
  margin: 0;
  padding: 0;
  bottom: 0;
}
    <div class="img_wrap">
  <img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161357.png" alt="huh" />
  <img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161403.png" />
  <img class="intro_sea" src="https://raw.githubusercontent.com/duccweb/duccweb.github.io/main/media/Untitled10_20230407161409.png" />
</div>
    Login or Signup to reply.
  3. 0

    If I understood you correctly, why wouldn’t you just use the "paint" app which is on the Microsoft computers (If you have one).

    If you do not have a Microsoft computer or the above does not help you, you can try the above on a different app.

    Hopefully that helps you!

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

Back To Top
Search