如何将图像放入展示盒答案

【问题标题】：how to fit an image into a showcase box如何将图像放入展示盒
【发布时间】：2021-01-24 01:02:13
【问题描述】：

我有这段代码，但图像总是不在展示框中，我尝试使用 align,float,position 但这些似乎都不起作用。我该如何解决？

div#main {
  padding-top: 20px;
  background-color: #ffffff;
}

.showcase-box {
  width: 330px;
  height: 200px;
  box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  margin: 0 20px 10px 20px;
  background-size: contain;
}

.showcase-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

<div id="main">
  <h1 class="showcase-heading">Showcase</h1>
  <div class="showcase-box">
    <img src="Images/POTC1.jpg" />
  </div>
</div>

谢谢！！

【问题讨论】：

请原谅我的无知，但是您的问题与 java 有什么关系？ Java 和 JavaScript 是两种完全独立且不同的编程语言。
什么都不清楚。提供完整的代码（以便也上传图像）。并具体描述你的问题。如有必要，绘制图表。
不可重现。可能是浏览器对 css “object-fit”的支持问题。

标签： javascript html css image

【解决方案1】：

您可以添加overflow:hidden; 和background-size:cover; 属性，以便图像在其容器外时不可见。

main {
    padding-top: 20px;
    background-color: #ffffff;
}

.showcase-box {
    width: 330px;
    height: 200px;
    box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    margin: 0 20px 10px 20px;
    background-size: cover;
    overflow: hidden;
}

.showcase-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <link rel="stylesheet" href="style.css" />
    </head>
    <body>
        <main>
            <h1 class="showcase-heading">Showcase</h1>
            <div class="showcase-box">
                <img src="" />
            </div>
        </main>
    </body>
</html>

现在，它应该可以工作了！

【讨论】：

嗨，非常感谢您抽出宝贵时间提供帮助。我试过你的建议，它真的很有帮助，但不能解决问题。谢谢
对不起，太糟糕了，我真的看不到你的图片，因为它位于你的计算机中，另一种解决方案是在 CSS 中添加背景图片，尝试在 CSS 中添加 background-image 属性.也许它可以帮助？
@someone 现在它应该可以工作了，我已经编辑了它，看看它在我的电脑上的样子。
@someone 你好，我很高兴这有帮助，你能否投票给我的答案并将其设置为已回答，这对我很有帮助。非常感谢你，祝你编码愉快！

【解决方案2】：

尝试使用 display: 块作为展示 img，除非您将图像视为块级元素，否则它不容易对齐。只是一个建议，但不确定。

div#main{
    padding-top: 20px;
    background-color: #ffffff;
}

.showcase-box{
    width: 330px;
    height: 200px;
    box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
    border-radius: 10px;
    margin: 0 20px 10px 20px;
    background-size: contain;
}

.showcase-box img{
    width: 100%;
    height: 100%;
    display:block;
}

现在添加所有对齐并查看

【讨论】：

【解决方案3】：

你必须写这样的代码

    .showcase-box{
    width: 330px;
    height: 200px;
    box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
    border-radius: 10px;
    margin: 0 20px 10px 20px;
    background-size: contain;
    display: flex;
    justify-content: center; 
    align-items: center;
    overflow:hidden;
    
}

.showcase-box img{
    width: 100%;
    height: 100%;
}

显示 flex 并对齐项目并证明内容中心将使您的图像在框的中心居中

【讨论】：

【解决方案4】：

我正在添加此答案以查看您现有的代码是否在此处产生正确的结果。

div#main{
    padding-top: 20px;
    background-color: #ffffff;
}

.showcase-box{
    width: 330px;
    height: 200px;
    box-shadow: 5px 15px 30px rgba(0,0,0,0.3);
    border-radius: 10px;
    margin: 0 20px 10px 20px;
    background-size: contain;
    border: 1px solid red; /* added border so to see if image overflows */
}

.showcase-box img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
}

<div id="main">
    <h1 class="showcase-heading">Showcase</h1>
    <div class="showcase-box">
        
        <img src="http://www.freeimageslive.com/galleries/backdrops/abstract/preview/pink_wires.jpg"/>
    </div>
</div>

看来确实如此。我把红色边框放进去看看图像是否溢出。它没有。

所以问题可能是“object-fit”或其他 css 属性的浏览器支持问题。

【讨论】：