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

Why is my image displayed cropped from the top and bottom on my web page? (like it is zoomed in) – Html

I am a complete beginner in CSS and JavaScript. I have added an image to my web page using HTML and CSS, but the upper half of the image is not visible. When I minimize the screen, the image shows up correctly. I have tried adjusting the CSS properties, but the issue persists. This is how my website looks (The image on the left of ‘Om Kakkad’)

here is my html code-

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mainPage.css">
        <script src="mainMenu.js"></script>

    </head>
    <body>
        <nav>
            <ul>
              <li><a href="#">Home</a></li>
              <li><a href="#">About</a></li>
              <li><a href="#">Portfolio</a></li>
              <li><a href="#">Contact</a></li>
            </ul>
          </nav>
          
          <div class="container">
            <img src="om.jpeg" alt="My Image"/>
            <div class="text">
              <h1>Om Kakkad</h1>
              <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. At, ex! Nam omnis ipsum ab repellat et impedit nulla tempore mollitia labore! Harum reprehenderit vitae excepturi, corporis fugit voluptatum perspiciatis quis!</p>
            </div>
          </div>
        
          <div class="card">
            <a href="your-page.html">
              <img src="#" alt="Your Image">
              <div class="text">
                <h2>Project 1</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque consequatur ad obcaecati deleniti enim earum cum quod, ullam rem, asperiores et soluta minima distinctio hic error assumenda ratione magnam repellat.</p>
              </div>
            </a>
          </div>
          
          <div class="card">
            <a href="your-page.html">
              <img src="#" alt="Your Image">
              <div class="text">
                <h2>Project 1</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloremque consequatur ad obcaecati deleniti enim earum cum quod, ullam rem, asperiores et soluta minima distinctio hic error assumenda ratione magnam repellat.</p>
              </div>
            </a>
          </div>

    </body>
</html>

CSS Code –

nav {
    background-color: rgb(184, 184, 184);
    padding: 10px;
    position: fixed;
    top: 0;
    width: 100%;
    
  }
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
  }
  
  li {
    margin: 0 10px;
  }
  
  a {
    color: white;
    text-decoration: none;
    transition: color 0.2s ease-out;
  }
  
  a:hover {
    color: #ccc;
  }

  main {
    padding-top: 60px; /* Set padding to make room for the fixed menu */
  }

body {
  background-color: #222;
  color: #fff;
  font-family: Arial, sans-serif;
}
  
  .container {
    display: flex;
    align-items: center;
    margin: 50px;
    height: 500px;
  }

  img {
    size: 100%;
  height: auto;
  display: block;
  }
  
  .text {
    flex-grow: 1;
  }
  
  h1 {
    font-size: 36px;
    margin-bottom: 20px;
  }
  
  p {
    font-size: 18px;
    line-height: 1.5;
  }
  
  .card {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    margin: 20px;
    overflow: hidden;
    width: calc(50% - 40px); /* Adjust width based on number of cards */
    transition: transform 0.2s ease-in-out;
    float: left; /* Add float property to align cards side by side */
  }
  
  .card:hover {
    transform: scale(1.05);
  }
  
  img {
    height: 200px;
    object-fit: cover;
    width: 100%;
  }
  
  .text {
    padding: 20px;
  }
  
  h2 {
    font-size: 24px;
    margin-bottom: 10px;
  }
  
  p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 20px;
  }
  
  a {
    color: #222;
    text-decoration: none;
  }
  
  a:hover {
    opacity: 0.8;
  }
  
  html, body {
    height: 100%;
  }

Javascript Code –

const cards = document.querySelectorAll('.card a');

cards.forEach(card => {
  card.addEventListener('click', e => {
    e.preventDefault();
    window.location.href = card.getAttribute('href');
  });
});

What I tried: I have used the max-width property to adjust the size of the image and the margin-right property to add space between the image and text. I also tried adjusting the margin property for the container and the align-items property for the flex display.

Expected Result: I expect the entire image to be displayed on the web page without any cropping or cutoff.

Tags:

2

Answers


  1. 0

    Remove this style:

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

    If you want to style a specific image to be height: 200px, add a class="className" to the image tag, and create a new style definition like this:

    <img src="image/source.jpg" class="className" />

        .className {
        height: 200px;
    }
    Login or Signup to reply.
  2. 0

    in your code you have a style

    img {
    height: 200px;
    object-fit: cover; <--- that one
    width: 100%;
  }

    that is the reason, the image is trying to fit into a container, basically, all your images will try to do that since you have this style for img tag

    see documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

    you can change it to object-fit: contain;

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

Back To Top
Search