i have a problem, i have struggled with a white space in my image, this problem does not happen in firefox.

Here is the problem image.

Here is the code.

HTML:

<hr>
<h2>Modos de Mezcla</h2>
<h3>Sobre imágenes (img)</h3>
<article >
  <img src="./assets/tree.jpg" alt="Arbol en una puesta de sol">
</article>

CSS:

html {
 box-sizing: border-box;
 font-size: 16px;
 font-family: sans-serif;
}

*,
*::after,
*::before {
 box-sizing: inherit;
}

body {
 margin: 0;
}

h1,
h2,
h3,
hr {
 margin: 0;
}

.card {
  width: 600px;
  height: 400px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 3rem;
  border: thick solid #000;
 }

img {
 max-width: 100%;
 height: 100%;
 object-fit: cover;
}

Please help me, thanks everyone.

CodePudding user response：

Add width: 100%; to your img class. It may look different from the image you're using but unfortunately, you didn't link it somewhere that we can access (we can't see your local link src="./assets/tree.jpg"). You could upload the actual image you're using to imgur and then paste that link into your code so we can work with it but I tried a random image from Google and this was my result:

https://jsfiddle.net/astombaugh/juaeL9yk/16/

If you still see a sliver of white space, you could also try changing your border on your card element to an outline instead which is how I generally avoid that error in Chrome.

CodePudding user response：

This because of the global "before & after box-sizing: inherit",

Just change it to content-box or initial, it will solve your problem,

I've tried with your code and it was fixed.

*,
*::after,
*::before {
 box-sizing: content-box ;
}