Question

所以基本上我想要实现的是一个横跨页面的条带形式的图像（具有固定的高度）。现在，如果图像太宽而不能完全适合，我想用“溢出：隐藏”来切除边缘并使其居中。我设法做到了，但现在我失败了：我不希望图像在太窄的时候被拉伸，但我希望它溢出包含div的顶部。

Here你可以看到一个例子：当你滚动到底部时，你可以看到3张图片，我想要复制这些图像在视口的1200px和1800px水平宽度之间的行为方式。

这是我到目前为止的基本标记：

<div class="piccontainer">
    <img src="picture.jpg" class="picture"/>
</div>

.piccontainer {
    display: flex;
    justify-content: center;
    overflow: hidden;
    min-height: 20vw;
    position: relative;
}
.picture {
    height: 100%
}

我尝试了几个jQuery插件，这些插件都没有产生预期的结果，我无法修改CSS来生成我需要的东西。我非常心烦意乱，因此非常感谢任何帮助！

提前谢谢！

Answer 1

更优雅的解决方案是在div上使用背景图像。

例如：

systemctl status chronos -l

Answer 2

您是否需要100％插入图片？你考虑使用图像作为背景：

 public Bakery(){
    super("Bakery Bread Option");

    setLayout(new FlowLayout());
    panel.setLayout(new GridBagLayout());
    add(panel);

    GridBagConstraints gbc= new GridBagConstraints();

    gbc.insets= new Insets(4,4,4,4);

    gbc.gridx=0;
    gbc.gridy=0;
    panel.add(option_Title, gbc);


    gbc.gridx=0;
    gbc.gridy=1;
    panel.add(check_Plain, gbc);

    gbc.gridx=0;
    gbc.gridy=2;
    panel.add(qty_Plain, gbc);

    gbc.gridx=0;
    gbc.gridy=3;
    panel.add(qty_Brown, gbc);

    gbc.insets= new Insets(0,175,0,0);

    gbc.gridx=0;
    gbc.gridy=4;
    panel.add(calc_Btn, gbc);

    gbc.insets= new Insets(4,4,4,4);

    gbc.gridx=1;
    gbc.gridy=1;
    panel.add(plain_Bread, gbc);


    gbc.gridx=1;
    gbc.gridy=2;
    panel.add(qtyPlainText, gbc);

    gbc.gridx=1;
    gbc.gridy=3;
    panel.add(qtyBrownText, gbc);

    gbc.gridx=2;
    gbc.gridy=1;
    panel.add(check_Brown, gbc);

    gbc.gridx=3;
    gbc.gridy=1;
    panel.add(brown_Bread, gbc);


    calc_Amt calc_Handler= new calc_Amt();
    calc_Btn.addActionListener(calc_Handler);

}

Answer 3

您可能想尝试将图片用作背景图片，然后使用图片上的.piccontainer { display: flex; justify-content: center; overflow: hidden; min-height: 20vw; position: relative; background-image:url(picture.jpg); background-size:cover; background-position:center center; }属性。

这样你就可以修复你的包含元素，你的图像将填满容器。

connect

参考：Background size on MDN

在具有固定高度的容器中调整图像大小

3 个答案: