Question

所以基本上我正在创建一个假的意大利餐厅网站，而 img-container 中的图像不适合框，在图像下方留下一行。此外，img-container 溢出了我不希望它做的图像。任何帮助表示赞赏。

这是我的代码

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap");

/* CSS RESET */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Body styling */

body {
  background-color: #dee7e7;
  font-family: "Open Sans", sans-serif;
}


/* Nav */

nav {
  margin-top: -35px;
  height: 70px;
  background-color: #fff;
  margin: 0px 0px 35px 0px;
  height: 60px;
  padding: 20px;
}

nav a {
  text-decoration: none;
}

nav a:visited {
  color: #000;
}

nav a:hover {
  cursor: pointer;
}

.nav-links {
  float: right;
  margin-top: -25px;
  margin-bottom: 20px;
  font-family: "Libre Baskerville", serif;
}

.nav-links .current {
  font-weight: 700;
  text-decoration: underline;
}

.nav-links a {
  padding-right: 10px;
  font-size: 16px;
  text-decoration: none;
  color: #000;
  font-weight: 400;
}

.nav-links a:hover {
  text-decoration: underline;
}

.nav-links a:visited {
  color: #000;
}

header nav h3 {
  font-family: "Libre Baskerville", serif;
  font-size: 26px;
}


/* Showcase 1 */

.showcase {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-column-gap: 1em;
  text-align: left;
  margin-bottom: 20px;
}

.text-container {
  place-items: center;
  margin: 20px 30px 20px 60px;
  font-size: 18px;
}

.text-container h1 {
  margin-bottom: 20px;
  font-family: "Libre Baskerville", serif;
}

.text-container p {
  font-size: 16px;
  padding-right: 10px;
}

.btn-primary {
  width: 150px;
  height: 40px;
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  background: #06a77d;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  box-shadow: 1px 1px 2px 1px grey;
}

.btn-primary:hover {
  color: lightgrey;
  text-decoration: underline;
  cursor: pointer;
}

.img-container {
  background: #c9d7d7;
}

.img-container img {
  margin-left: 80px;
  overflow: auto;
  height: 500px;
}


/* Showcase 2 */

.showcase-2 {
  display: grid;
  grid-template-columns: 2fr 3fr;
  grid-column-gap: 1em;
  text-align: left;
  margin-bottom: 30px;
  background: #192534;
  color: #fff;
}

.text-container-2 {
  place-items: center;
  margin: 20px 30px 20px 60px;
  font-size: 16px;
  order: 1;
}

.text-container-2 h1 {
  margin-bottom: 20px;
  font-family: "Libre Baskerville", serif;
}

.text-container-2 p {
  font-size: 16px;
  padding-right: 10px;
}

.btn-secondary {
  width: 150px;
  height: 40px;
  margin-top: 20px;
  border: none;
  border-radius: 5px;
  background: #cc224e;
  color: #fff;
  font-family: "Open Sans", sans-serif;
  font-weight: 600;
  box-shadow: 1px 1px 2px 1px black;
}

.btn-primary:hover {
  color: lightgrey;
  text-decoration: underline;
  cursor: pointer;
}

.img-container-2 {
  background: #3d5777;
  padding-right: -300px;
  order: 2;
}

.img-container-2 img {
  margin-left: 80px;
  max-width: 100%;
  height: 510px;
}

.img-good-food img {
  float: right;
  max-width: 100%;
  height: 130px;
  margin-right: 20px;
}

.page-title {
  text-align: center;
  margin-bottom: 30px;
  font-family: "Libre Baskerville";
}

.about-container {
  place-items: center;
  margin: 10px 30px 20px 60px;
  font-size: 18px;
}

.text-container h1 {
  margin-bottom: 20px;
  font-family: "Libre Baskerville", serif;
}

.about-container p {
  font-size: 16px;
  padding-right: 10px;
  margin-left: 20px;
}

.about-container button {
  margin-left: 20px;
}

.menu-text {
  text-align: center;
  margin-left: 70px;
  margin-right: 70px;
  margin-bottom: 20px;
}

.menu-container {
  display: flex;
  justify-content: center;
  background: #3d5777;
  margin-left: 200px;
  margin-right: 200px;
  margin-bottom: 20px;
}

.fa-chevron-left {
  font-size: 30px;
  float: left;
  margin-right: 200px;
  margin-top: 300px;
  color: #fff;
}

.fa-chevron-right {
  font-size: 30px;
  float: left;
  margin-left: 200px;
  margin-top: 300px;
  color: #fff;
}

.menu-container img {
  max-width: 100%;
  height: 650px;
  margin: 10px;
}

iframe {
  margin-top: 40px;
  float: right;
  margin-right: 100px;
  width: 600px;
  box-shadow: 1px 1px 1px 1px grey;
}

.contact {
  background: #3d5777;
  width: 400px;
  height: 200px;
  color: #fff;
  margin-left: 120px;
  margin-top: 160px;
  place-items: center;
  justify-content: center;
  padding-top: 30px;
}

.contact p {
  margin-bottom: 5px;
}

.fas {
  margin-bottom: 5px;
  font-size: 16px;
}


/* Footer */

footer {
  width: 100%;
  text-align: center;
  background: #192534;
  padding: 10px;
}

footer h2 {
  color: #fff;
  font-size: 14px;
}

footer a {
  color: #8abeff;
}

<header>
  <nav>
    <a href="">
      <h3 class="logo">Chef Italia</h1>
    </a>

    <div class="nav-links">
      <a class="current" href="index.html">Home</a>
      <a href="about.html">About Us</a>
      <a href="menu.html">Menu</a>
      <a href="contact.html">Contact</a>
    </div>
  </nav>
</header>

<div class="showcase">
  <div class="img-container">
    <img src="img/home-showcase.jpg" alt="Photo of Italian cheese on wooden board">
  </div>
  <div class="text-container">
    <h1>Welcome to Chef Italia</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
      adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
    <button class="btn-primary">Find out more</button>
  </div>
</div>
</div>

<div class="showcase-2">
  <div class="img-container-2">
    <img src="img/authenic-italian.png" alt="Photo of 2 pizzas on plates with glasses of water and cutlery on a table">
  </div>
  <div class="text-container-2">
    <h1>Authentic Italian Food</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
      adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
      nemo minus doloremque possimus? Iste.</p>
    <button class="btn-secondary">View Our Menu</button>
  </div>
</div>

<div class="showcase">
  <div class="img-container">
    <img src="img/good-food-picture.jpeg" alt="Photo outside of resteraunt with green leaf tree covering one third of the yellow building">
  </div>
  <div class="text-container">
    <h1>Good Food Awards Winner 2019</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis voluptas inventore quae. Dolores sapiente officiis, reprehenderit fugiat aliquam veritatis, distinctio doloremque minima facere maxime voluptatibus sunt suscipit animi error molestias
      adipisci. Officia, quae adipisci quas quod incidunt, dolores vero ipsa pariatur, necessitatibus ullam ea aspernatur eveniet quisquam eaque molestiae.</p>
    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt praesentium reiciendis accusamus reprehenderit saepe accusantium vero quas quam asperiores aliquam quia, laboriosam necessitatibus sequi autem aperiam maxime quidem temporibus adipisci
      nemo minus doloremque possimus? Iste.</p>
    <button class="btn-primary">Find Out More</button>
    <div class="img-good-food">
      <a href="https://goodfoodfdn.org/"><img src="img/good-food.png" alt="Good Food Awards Logo"></a>
    </div>
  </div>
</div>

<footer>
  <h2>&copy; Chef Italia 2021. Designed and developed with ? by <a href="https://www.github.com/tylerlecho">Tyler Lechowski</a></h2>
</footer>

Answer 1

您是否尝试只添加：

.home-page-row .kt-row-layout-inner .kt-row-column-wrap .wp-block-kadence-column .kt-inside-inner-col {

    display: flex;
    flex-direction: column;
    flex: 1;
}

要定义图像大小，您可以添加例如：

.img-container {    
     position:relative
 }

.img-container img {    
    height: 100%;
    width: 100%;
}

但请确保将其添加到 .img-container { position:relative; width: 200px; height: 200px; }，而不是 .img-container。在 .img-container img 中，您以像素为单位定义大小，但在 .img-container 中，您将宽度和高度设置为 100% 以填充整个容器

Answer 2

尝试添加：

   .img-container {    
     position: relative;
     overflow: hidden;
 }

.img-container img {
    height: 100%;
    min-width: 100%;
    object-fit: cover;
    position: absolute;
}

隐藏 Oveflow 以隐藏容器外的图片的任何部分。对象适合的盖子，使其覆盖容器。如果您想要较小的图片，只需在容器上指定高度和宽度即可。

图像不会填充 div

2 个答案: