CSS img won't resize-CodePudding

Total newbie here, tried to google my issue, even get on the second page of results... I'm stuck on resizing image and I have no idea why it is not working, hoping someone can help. By using Inspect on Chrome I can see that element for img is not being connected to the img and I have no idea why.

Block below is within <main>

      <article>
        <section >
          <img src="./assets/images/page_screenshot.png" alt=""/>
        </section>
      </article>

Here is CSS that I have for the whole part.

main {
    display: inline-block;
    background-color: var(--main-bgc);
    padding-top: 5%;
}

article {
    display: flex;
    margin-bottom: 3%;
    width: 100%;
}

.article-title {
    display: inline-block;
    width: 9%;
    margin-right: 1%;
    color: var(--font-colot-slate);
    border-right: 1px solid var(--font-color-white);
}

.article-title h2 {
    float: right;
    margin-right: 10px;
}

.article-content {
    display: inline-block;
    width: 90%;
    float: right;
    color: var(--font-color-white);
}

.article-content img {
    width: 100px;
    height: 100px;
}

I tried adding height and width in tag and works fine, but not very happy with that solution.

CodePudding user response：

The code you've given us works fine, as you can see in this snippet (run it to see the result). So if your image is not being properly resized, it must be because of some other part of your code, which you haven't included.

If you want the image to retain its original aspect ratio, you can add object-fit: cover; which will crop the image rather than squash it.

article {
    display: flex;
    margin-bottom: 3%;
    width: 100%;
}

.article-content {
    display: inline-block;
    width: 90%;
    float: right;
    color: var(--font-color-white);
}

.article-content img {
    width: 100px;
    height: 100px;
    object-fit: cover;
}

<article>
  <section >
    <img src="https://shotkit.com/wp-content/uploads/2020/08/night-landscape-photography-featured.jpg">
  </section>
</article>