css - 如何让图像 slider 图像不拉伸(stretch)但保持字幕定位？

Question

这是我正在处理的网站:

我可以通过删除 height: 481px; 来让图像不被拉伸(stretch)；但后来我丢失了图像下方的标题和方 block ，如果图像高度不同，它会四处移动。我试过摆弄定位，但还没有找到解决方案。

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将它应用到他的 parent 身上 .slider-cont-wrapper .:

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

(将 top: 和 right: 更改为适合您布局的尺寸)