Html 不同宽度、相同高度的响应式IMG

我不确定我到底需要什么，但基本上我有三个不同的图像，我想保持相同的比例，但它们的大小不同。我猜是这样的：

|------| |----------| |--| 
|Img1 | | Img2 | | 3 |
|------| |----------| |--|

并让他们做出相应的调整。以下是HTML和CSS：

@媒体和全部（最大宽度：775px）{
.aboutbody、.sidebar{
显示：块；
}
.侧边栏{
宽度：86%；
左缘：7%；
高度：300px；
}
.侧边栏{
高度：200px；
宽度：自动；
显示：内联块；
}
}

使用

flex

.sidebar {
     display: flex;
}

并为每个图像指定一个百分比宽度

请参见使用

flex

.sidebar {
     display: flex;
}

并为每个图像指定一个百分比宽度

---

参见

我建议给他们一个百分比宽度，每个孩子都有自己的宽度，让他们占据可用空间

大概是这样的：

.sidebarpics:nth-child(1)
{
    width: 18%;
    height: auto;
}

.sidebarpics:nth-child(2)
{
    width: 36%;
    height: auto;
}

.sidebarpics:nth-child(3)
{
    width: 40%;
    height: auto;
}

---

我建议给他们一个百分比宽度，每个孩子都有自己的宽度，让他们占据可用的空间

大概是这样的：

.sidebarpics:nth-child(1)
{
    width: 18%;
    height: auto;
}

.sidebarpics:nth-child(2)
{
    width: 36%;
    height: auto;
}

.sidebarpics:nth-child(3)
{
    width: 40%;
    height: auto;
}

---

因为您使用

@media

查询来共享您的图像。您可以在

%

尝试这样做

@media all and (max-width: 775px) {
.aboutbody, .sidebar {
    display: block;
}

.sidebar {
    width: 86%;
    margin-left: 7%;
    height: 300px;
}

.sidebarpics:first-child  {
    height: 200px;
    width: 30%; /*share the two imgs to any % you like*/
    float: left;
    display: inline-block;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 70%;
    float: left;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

@media all and (max-width: 600px) {
.sidebarpics:first-child  {
    height: 200px;
    width: 100%;
    float: none;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 100%;
    float: none;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

---

因为您使用

@media

查询来共享您的图像。您可以在

%

尝试这样做

@media all and (max-width: 775px) {
.aboutbody, .sidebar {
    display: block;
}

.sidebar {
    width: 86%;
    margin-left: 7%;
    height: 300px;
}

.sidebarpics:first-child  {
    height: 200px;
    width: 30%; /*share the two imgs to any % you like*/
    float: left;
    display: inline-block;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 70%;
    float: left;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

@media all and (max-width: 600px) {
.sidebarpics:first-child  {
    height: 200px;
    width: 100%;
    float: none;
}
.sidebarpics:nth-child(2) {
    height: 200px;
    width: 100%;
    float: none;
    display: inline-block;
}
.sidebarpics:last-child {
    height: 200px;
    width: 100%;
    display: inline-block;
}
}

---

在您的情况下，纵横比是问题所在

---

有很多解决方案，但我建议使用3个小版本，并在较小的屏幕上显示它们。如果你喜欢这个想法，那么我可以给你写一些代码。

在你的例子中，纵横比是个问题

---

有很多解决方案，但我建议使用3个小版本，并在较小的屏幕上显示它们。如果您喜欢这个想法，那么我可以为您编写一些代码。

您可以限制每个图像的最大宽度：

@media (max-width: 775px) {
  .sidebarpics {
     max-width: 32%;
     display: inline-block;
  }
}

---

您可以仅限制每个图像的最大宽度：

@media (max-width: 775px) {
  .sidebarpics {
     max-width: 32%;
     display: inline-block;
  }
}

---

很难管理以下各项：

• 单独保存图像的比率
• 都一样高
• 不切割任何图像

如果最后一点是你可以逃避的，我建议如下。 在父容器上使用定义的高度，溢出：隐藏；把高于高度的东西都剪掉。 图像与顶部对齐并具有最大宽度，以确保它们彼此相邻。如果您不介意放大，请使用宽度

.sidebar {
    height: 300px;
   overflow: hidden;
}
.sidebar img {
    display: inline-block;
    vertical-align: top;
    max-width: 33%;
}

---

很难管理以下各项：

• 单独保存图像的比率
• 都一样高
• 不切割任何图像

如果最后一点是你可以逃避的，我建议如下。 在父容器上使用定义的高度，溢出：隐藏；把高于高度的东西都剪掉。 图像与顶部对齐并具有最大宽度，以确保它们彼此相邻。如果您不介意放大，请使用宽度

.sidebar {
    height: 300px;
   overflow: hidden;
}
.sidebar img {
    display: inline-block;
    vertical-align: top;
    max-width: 33%;
}

---

尝试垂直对齐顶部。 忽略玩高度，玩宽度的百分比

 @media (max-width: 775px){
.sidebarpics {
    max-width: 32%;
    width: auto;
    display: inline-block;
    vertical-align: top;
    max-height: 100px;
}
}

---

尝试垂直对齐顶部。 忽略玩高度，玩宽度的百分比

 @media (max-width: 775px){
.sidebarpics {
    max-width: 32%;
    width: auto;
    display: inline-block;
    vertical-align: top;
    max-height: 100px;
}
}

---

嗨，我不知道你到底想要什么。但我猜你希望所有3张图片都以相同的高度相邻。但现在困难的部分来了。比例是多少？您是否可以拉伸和挤压图像，使其超出比例？因为它们都有不同的。你可以给

侧边栏图片
div a
宽度：30%
和
高度：auto
？然而，如上所述，这将使一张图片比其他图片高。虽然挤压似乎不是一种选择……如果可能的话，我想保持它们的比例不变。所以，让一张图像覆盖20%的div，一张覆盖60%，一张覆盖40%（不是确切的数字），然后所有图像都是相同的高度，所以它是齐平的。@Goombah OP提到所有图像都应该是相同的高度。如果是这样的话，那么它的代价就是要么裁掉一些东西，要么拉伸图像，如果你想让图像不拉伸，不裁剪，如果你想设置一个固定的高度，CSS是不可能的。如果这是你想要的，你必须求助于JS。如果设定的高度没有纯CSS的效果重要，我可以提供一个答案。嗨，我不确定你到底想要什么。但我猜你希望所有3张图片都以相同的高度相邻。但现在困难的部分来了。比例是多少？您是否可以拉伸和挤压图像，使其超出比例？因为它们都有不同的。你可以给
侧边栏图片
div a
宽度：30%
和
高度：auto
？然而，如上所述，这将使一张图片比其他图片高。虽然挤压似乎不是一种选择……如果可能的话，我想保持它们的比例不变。所以，让一张图像覆盖20%的div，一张覆盖60%，一张覆盖40%（不是确切的数字），然后所有图像都是相同的高度，所以它是齐平的。@Goombah OP提到所有图像都应该是相同的高度。如果是这样的话，那么它的代价就是要么裁掉一些东西，要么拉伸图像，如果你想让图像不拉伸，不裁剪，如果你想设置一个固定的高度，CSS是不可能的。如果这是你想要的，你必须求助于JS。如果设定的高度没有纯CSS的效果重要，我可以提供一个答案。我认为这可能是我最好的选择。我想试试你的代码。谢谢哦，在这里使用图片标签是个好主意。但对于不同的断点，包含不同的img元素并没有那么多。我认为这可能是我最好的选择。我