我完全是CSS和JavaScript的初学者。我使用HTML和CSS向网页添加了一个图像，但图像的上半部分不可见。当我最小化屏幕时，图像正确显示。我尝试调整CSS属性，但问题仍然存在。This is how my website looks (The image on the left of 'Om Kakkad')

这是我的html代码-

<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代码-

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代码-

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

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

我的努力：我已经使用max-width属性调整了图像的大小，使用margin-right属性在图像和文本之间添加了空间，还尝试调整了容器的margin属性和flex显示的align-items属性。
预期结果：我希望整个图像显示在网页上没有任何裁剪或切断。

2条答案

按热度按时间

wwwo4jvm1#

删除此样式：

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

如果要将特定图像的样式设置为height: 200px，请将class="className"添加到image标签，然后创建如下所示的新样式定义：
<img src="image/source.jpg" class="className" />

.className {
        height: 200px;
    }

赞(0）回复(0）举报 2023-03-09

jhdbpxl92#

在代码中，您有一种样式

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

这就是原因，图像是试图适应一个容器，基本上，所有的图像将尝试这样做，因为你有这个风格的img标签
参见此处的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit
可以将其更改为object-fit: contain;

css 为什么我的图像显示从顶部和底部裁剪在我的网页？(像它是放大)

2条答案

相关问题

热门标签

最新问答