Html 如何在保持纵横比的同时调整带有标题的图像的大小

我想显示一个下面有标题的图像。如果用户调整浏览器的大小，图像将在保持纵横比的同时调整大小。图像的宽度不得超过其正常宽度。可以缩小，但不能扩大到超出其实际大小。图像宽度不得超过500px，高度不得超过800px。调整图像大小时，标题的宽度必须与图像的左右两侧对齐。以下是我得到的：

代码：

.furlHtmlCont{
最大宽度：600px；
最大高度：800px；
显示：内联块；
弯曲方向：立柱；
调整项目：灵活启动；
盒影：0 0 8px#c0；
左边框：1px实心#C0C0；
右边框：1px实心#C0C0；
边框底部：1px实心#C0；
边框左下半径：3px；
边框右下半径：3px；
}
furlHtmlFooter先生{
显示：表格标题；
标题侧：底部；
填充：5px10px 5px10px；
}
furlHtmlImg先生{
最大宽度：100%；
最大高度：300px；
光标：指针；
}

标题在这里
这里有很长的描述。即使用户调整图像的大小，它也应该在图像的右边缘环绕。

如上所述更改css。

---

如果这是你想要的，请告诉我。

我认为这应该行得通

CSS:

.furlHtmlCont {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 800px;
    display: inline-block;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 0 8px #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.furlHtmlFooter {
    display: table-caption;
    caption-side: bottom;
    padding: 5px 10px 5px 10px;
}

.furlHtmlImg {
    width:100%;
    height:auto;
    cursor: pointer;
}

jshiddle:

我们开始吧

html，
身体{
身高：100%；
}
.集装箱{
宽度：100%；
最大宽度：500px；
最大高度：800px；
身高：100%；
}
.图像容器{
宽度：100%；
身高：100%；
}
img{
最大宽度：100%；
最大高度：100%；
宽度：自动；
高度：自动；
}

标题在这里
这里有很长的描述。即使用户调整图像的大小，它也应该在图像的右边缘环绕。

您应该在那里放置一张精确宽度和高度的图像。每次对于图像，您都无法指定宽度和高度，因为这会拉伸和扭曲图像，因此请将图像设置为正确的大小以正确运行。

列出的任何解决方案都无法将高度限制为某个最大值。以下是解决方案（我还决定将高度限制在最大400px，而不是800px）：

Html:

---

---

您需要裁剪该图像；现在它的高度大于宽度。您可以在图像周围放置一个div并溢出：隐藏其余部分或在模板的后端进行裁剪。裁剪是不允许的。您正在与数学比例定律作斗争。你的图像总是会被扭曲，除非它是正确的比例开始。如果我可以调整图像的大小，并保持其纵横比相同使用javascript，那么它几乎可以肯定可以使用css完成。你能展示这个例子请？几乎。如果将图像容器的最大高度从800px更改为400px，则高度不会变小。@AndroidDev:经过多次尝试，我终于找到了解决方案。现在，您可以调整浏览器的

宽度

或

高度

以查看效果。您还可以更改

容器的
最大宽度
和
最大高度
。图像将是合适的。请看我的最新答案。差不多了。如果将最大高度从800px更改为400px，则高度不会更改。@AndroidDev则图像将不成比例，如果你想显示一半的图像，然后添加
溢出：隐藏
，那么容器的大小调整很好，但我建议保留尺寸。我认为这似乎符合你的要求，而且没有裁剪。图像代码正在调整大小。@AndroidDev基于你
最大高度：400px
，最大宽度设置为500px，容器是不成比例的，如果您希望图像适合此容器，则需要拉伸/更改比例，这将使图像看起来很难看。我建议您调整其他容器元素，使其与当前的CSSAlso配合良好。如您所说，并引用+图像宽度不得超过500px，高度不得超过800px。因此，根据上面的代码，它会做你想做的事情。当你调整浏览器的大小时，图像仍然会拉伸，尽管拉伸较少。更改了css中的两行。现在试一试，看看它是否有效。您无法设置最大宽度：533px；是的，知道了。谢谢你的问题，我得到了答案，你也一样：-）为什么我不能将最大宽度设置为533px。我看到了原图，尺寸是533x800
.furlHtmlCont {
    width: 100%;
    height: 100%;
    max-width: 500px;
    max-height: 800px;
    display: inline-block;
    flex-direction: column;
    align-items: flex-start;
    box-shadow: 0 0 8px #c0c0c0;
    border-left: 1px solid #c0c0c0;
    border-right: 1px solid #c0c0c0;
    border-bottom: 1px solid #c0c0c0;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
}

.furlHtmlFooter {
    display: table-caption;
    caption-side: bottom;
    padding: 5px 10px 5px 10px;
}

.furlHtmlImg {
    width:100%;
    height:auto;
    cursor: pointer;
}

<div class="furlHtmlCont">
    <div style="display: table;">
        <img class="furlHtmlImg">
        <div class="furlHtmlFooter">
            <div class="furlHtmlTitle">Caption goes here</div>
            <div class="furlHtmlDesc">This is where the long description goes and its with should not exceed the width of the image. No clipping either.</div>
        </div>
    </div>
</div>

.furlHtmlCont {
        max-width: 600px;
        display: inline-block;
        box-shadow: 0 0 8px #c0c0c0;
        border-left: 1px solid #c0c0c0;
        border-right: 1px solid #c0c0c0;
        border-bottom: 1px solid #c0c0c0;
        border-bottom-left-radius: 3px;
        border-bottom-right-radius: 3px;
    }

    .furlHtmlFooter {
        display: table-caption;
        caption-side: bottom;
        padding: 5px 10px 5px 10px;
    }

    .furlHtmlImg {
        max-width: 100%;
        max-height: 400px;
        cursor: pointer;
    }