Html 在保持纵横比的同时在图像边框内定位标题

我处理的图像可能有标题，也可能没有标题

我通过以下方式在每个图像周围创建了一个宝丽来效果：

<div style="text-align:center">
<img src="daenerys.png" style="border: 10px solid #FAFAFA;border-bottom: 45px solid #FAFAFA;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
</div>

结果看起来可以接受：

但这不能像我希望的那样支持字幕。我需要在图像下方，在宝丽来效果的白色边框内写一个标题

我将代码更改为：

<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E; -moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
<img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
<div class="cxl cgy"></div>
</div>

这给了我一个被拉伸的图像：

如何保持图像分辨率和纵横比不变，同时确保文本根据需要动态增长图像下方的空白？我看了一下，想寻求帮助，但没有用

---

总体目标是保持宝丽来的外观（即使是没有标题的图像），并使用图像下方的空白显示有标题的图像的文本

对于如何创建polariod，有一个新的html标记，可以在一个元素中包含标题和图像

结构如下：

-- Figure
---- img
---- figcaption

我做了一个JSFIDLE，同时考虑到了您的结构和代码

您可以使用卡片样式设置地物标记的样式，如果需要，还可以保留标题文本

JSIDLE链接：

SCSS代码：

figure {
text-align: center;
background-color: #ffffff;
display: inline-block;
padding: 10px;
height: 100%;
-webkit-box-shadow: 3px 3px 3px #9e9e9e;
-moz-box-shadow: 3px 3px 3px #9e9e9e;
box-shadow: 3px 3px 3px #9e9e9e;

img {
    display: block;
    margin: 0 auto;
    margin-bottom: 20px;
    width: 100%;
    height: 100%;
}
figcaption {
    text-align: center;
}
}

---

Figure tag reference link:

图像拉伸的原因是您没有为div设置固定/最大宽度，没有指定宽度的文本将随着宽度变长而拉伸图像

尝试添加：

div{
    /*width:300px; use max-width if responsive*/
    max-width: 300px; /*maximum width the image will stretch*/
    box-sizing: border-box; /*include padding as part of the specified max-width above*/
}

.img-wrapper {
  max-width: 500px;
  padding: 10px;
  background: #fff;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

.image {
  width: 100%;
}

.text {
  word-wrap: break-word;
}

示例：

div{
    /*width:300px; use max-width if responsive*/
    max-width: 300px; /*maximum width the image will stretch*/
    box-sizing: border-box; /*include padding as part of the specified max-width above*/
}

.img-wrapper {
  max-width: 500px;
  padding: 10px;
  background: #fff;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

.image {
  width: 100%;
}

.text {
  word-wrap: break-word;
}

div{
最大宽度：300px；
框大小：边框框；
}

Lorem ipsum dolor sit amet，是一位杰出的领导者。埃尼安·康莫多·利古拉·埃吉特·多洛。埃尼安·马萨。在自然社会中，因怀孕而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯，因饥饿而死亡的蒙特斯。Donec quam felis、ultricies nec、pellentesque eu、pretium quis、，
扫描电镜。这是一个很好的例子。

设置图像的最大宽度可能会有所帮助。图像将调整大小以适应纵横比，而不会拉伸超过所需的宽度。并且文本内容也将相应地进行包装

CSS:

div{
    /*width:300px; use max-width if responsive*/
    max-width: 300px; /*maximum width the image will stretch*/
    box-sizing: border-box; /*include padding as part of the specified max-width above*/
}

.img-wrapper {
  max-width: 500px;
  padding: 10px;
  background: #fff;
  text-align: center;
  position: relative;
  box-sizing: border-box;
}

.image {
  width: 100%;
}

.text {
  word-wrap: break-word;
}

这是你的电话号码。

---

希望这有帮助：）

您不必设置

最大宽度

，只需将

图像

宽度设置为

宽度：100%

和

高度：自动

---

Fiddle:

我找到了一个解决方案，可以保持纵横比：

<div style="text-align:center;background-color: #ffffff;display: inline-block;padding: 10px;-webkit-box-shadow: 3px 3px 3px #9E9E9E;-moz-box-shadow: 3px 3px 3px #9E9E9E;box-shadow: 3px 3px 3px #9E9E9E;">
        <div style="display: inline-table;">
            <img src="daenerys.png" style="display: block;margin: 0 auto;margin-bottom: 20px;width: 100%;">
        <div class="cxl cgy" style="display: table-caption;width: 100%;caption-side: bottom;">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae necessitatibus architecto quis non error placeat illo enim illum quo corrupti molestias id sint recusandae animi obcaecati, laudantium nostrum fugit eaque.
        </div>
        </div>
    </div>

我的同僚们都是精英。作为一名必要的建筑设计师，他将无错误地放置在腐蚀分子所在的地方，并将其放置在动物体内，以防死亡。

---

这里是预览链接：

为什么要将图像转换为块？如果我的图片是由用户上传的，因此可以是可变宽度的，那么这将如何工作呢？是否绝对有必要采用

max-width

路线？您可以将max-width添加到通用CSS文件中，或者只需将具有max-width的内联样式添加到模板中，这样即使用户上传图像，样式也会自动添加。实际上，您是对的；我要把它内联起来。图像宽度包含在一个名为

wid

的变量中，在Django中，可以通过写入

{{wid}

将其直接注入HTML模板和

框大小：边框框最外层分区中的内联？是的，或者您可以只添加
最大宽度：300px
到
img
标记唯一的问题是，即使图像很小，它也会将图像扩展到父div宽度的100%。@HassanBaig那么我认为你必须使用Javascript太多了：啊，希望得到纯CSS的好处。看，我的一些用户源于一个去掉JS头的转发代理。我看了一下你的预览链接。实际上，我需要将标题放在图像的正下方，在宝丽来效果内。为了清楚地理解，我更改了图像。。现在你可以在预览链接上再看一眼了。如果不行，那么你能给我一个你想要的快照吗。哦，现在我知道你想要完成什么了：-）我一会儿会给你回复。顺便说一句，还有一件事。在父div或包含它的页面中，我需要做什么来将整个内容居中对齐？是否应将
文本对齐：居中添加到
？您的建议是什么。我认为父div更好，因为它将自动继承到它的子元素。好消息是，由于您的代码，图像以正确的纵横比显示。然而，它周围的白色边界仍然很长，所以这个问题仍然没有解决。看起来是这样的：我已经更新了代码来解决这个问题。使您的图像宽度100%。这是解决办法