Here is a simple code I'm testing

div {
  background-color: white;
  height: 100%;
  width: 100%;
}

img {
  max-width: 200px;
  border: 5px solid black;
}

<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Fiddle:

On the other one there's a white pixel border on the right and bottom

Any tips on how to remove that?

CodePudding user response：

I think it is caused because of the number of pixels of the image.

I would suggest to add a black background to your image like the following CSS code:

div {
  background-color: white;
  height: 100%;
  width: 100%;
}

img {
  max-width: 200px;
  border: 5px solid black;
  
  /*My change*/
  background-color: black;
}

<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Hope this could be useful. Greetings.

CodePudding user response：

You can also try with max-width:199px or max-width:202px

div {
  background-color: white;
  height: 100%;
  width: 100%;
}

img {
/*My change*/
  max-width: 199px;
  border: 5px solid black;
}

<div>
<img src="https://www.thedesignwork.com/wp-content/uploads/2011/10/Random-Pictures-of-Conceptual-and-Creative-Ideas-02.jpg">
</div>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>