如何保持背景图片的长宽比？
我尝试查看其他答案，但没有帮助。我的背景是动态的，因此图像的大小会改变，因此我需要保持宽高比，以便可以看到整个图像。这是我的CSS：
.image_submit_div {
border: 1px solid #ccc;
display: inline-block;
padding: 20px 50px;
width: 55%;
height: 320px;
cursor: pointer;
background: url('something.jpg'); /* this changes */
margin: 0 0 25px;
}
html
<label for="id_image" class="image_submit_div">
此刻取决于图像，有时很多图像被切除。我希望缩小图像以便可以完全看到。任何的想法？
问题答案：
使用background-size: cover;覆盖整个元件，同时保持纵横比
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, and position. */
background-image: url('//via.placeholder.com/350x150');
background-size: cover;
background-position: center;
/* Or, use the background shortcut. */
background: url('//via.placeholder.com/350x150') center/cover;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
如果要显示整个图像，同时保持宽高比，请background-size:contain;改用：
.background-1,
.background-2,
.background-3 {
/* Set the background image, size, position, repeat, and color. */
background-image: url('//via.placeholder.com/350x150');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: #fbfbfb;
/* Or, use the background shortcut. */
background: #fbfbfb url('//via.placeholder.com/350x150') no-repeat center/contain;
margin: 20px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.background-1 {
width: 300px;
height: 200px;
}
.background-2 {
width: 200px;
height: 50px;
}
.background-3 {
width: 100px;
height: 200px;
}
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
-
问题内容： 我有一个带有绘制的背景图像的图像和一个布局管理器，其中包含其他较小的图像，所有这些图像都位于内。背景图像非常大，我希望无论在大显示器还是小显示器上都能保持其宽高比。 最终，我希望能够将其及其较小的图像“粘贴”到背景图片中。 我四处寻找资源，似乎许多示例都使用，但我不是。这会带来问题吗？我将在下面发布用于绘制图像的代码，如果我缺少任何信息，请告诉我。 编辑：我应该提一下，我知道长宽比公式
-
问题内容： 我为设置背景图片有一个小问题。 这是我在网站上获得的html： 这是CSS： 我不知道为什么按钮的背景仍然是白色。 问题答案： 令人惊讶的是，这里没有答案解决或提及实际问题。 该CSS选择器说：“给我一个元素与ID 里面 一个元素”，就像这样： 但是，您想要的是 带有* id 的元素。而选择器将是（请注意 button 和 #rock 之间缺少的空间）。 * 正如@Greg已经提到的：
-
问题内容： 如果选择了该面板（单击该面板），则该面板的颜色为蓝色。另外，我在该面板上添加了一个小标志（图像），它表示所选面板之前已被选中。 因此，如果用户看到例如10个面板，其中有4个带有这个小标记，则他知道自己之前已经单击了这些面板。到目前为止，这项工作还不错。现在的问题是我无法显示小标志并使面板同时变为蓝色。 我使用css将面板设置为蓝色，使用设置背景图像。但是背景色似乎在图像上方，因此您看不
-
编辑：我应该提到的是，我知道纵横比公式：原始高度/原始宽度x新宽度=新高度，但是，我不知道如何正确地使用它，以我的优势。
-
问题内容： 我正在创建一个GUI，尽管很简单，但我想让背景图像（2048 X 2048）填满整个窗口，并在左上角放置一个正方形，可以偶尔加载64 X 64图像。在此先感谢提供帮助的任何人:)编辑：我已经知道如何使JFrame设置大小，其图像加载需要帮助。 问题答案： 这是一个在JFrame中添加背景图像的简单示例： 点击这里了解更多信息
-
问题内容： 这是我的代码，它确实找到了图像，所以这不是我关心的问题，我关心的是如何使该图像成为面板的背景。我正在尝试使用Graphics，但是我不起作用，有什么想法吗？请？？ 问题答案： 您的代码中有一个错误。在取消引用之前，将其设置为该行。这肯定会抛出一个。与其声明自己的Graphics对象，不如使用传递给要用于绘画的方法的那个。要在Swing中执行此操作，您应该实现绘制图像的方法，如下所示：