如何使图像滑块图像不被拉伸但保持字幕的定位？

Question

以下是我正在处理的网站：

我可以通过移除高度来获取图像：481px;但是后来我丢失了图像下方的标题和方块，如果图像高度不同，它会四处移动。我已经尝试过搞定位，但我还没有找到解决方案。

Answer 1

有几种方法可以解决这个问题。

正如@Sven指出的那样，一个更清洁的解决方案是使用标记<div>而不是<img>，并将图像用作background作为div。

或者，

您可以使用CCS剪辑属性将所有图像裁剪为相同尺寸，同时保持原始比例：

img {clip:rect(0px,60px,200px,0px)}

（查看此链接以获取有关剪辑的文档： http://www.w3schools.com/cssref/pr_pos_clip.asp ）

此时最快的解决方案（对实际代码需要较少更改的解决方案）可能仅使用绝对定位，而是将其应用于div .text-box将其应用于其父级.slider-cont-wrapper：

.slider-cont-wrapper {position:absolute; top:100px; right:100px}

（将top:和right:更改为适合您布局的措施）

Answer 2

嗯，如果图像的比例不同，无论你做什么，你都不会得到完全适合同一地点的不同图像尺寸。所以，你想要什么？