html - 在 Umbraco 7 中缩略图不继承 CSS

Question

我在使我的缩略图在我的 Umbraco 元素中正常运行时遇到了问题。

我正在使用 for 循环来显示来自多媒体选择器属性编辑器的缩略图。

<ul class="hide-bullets">
                        @for (var i = 0; i < images.Count; i++)
                        {
                        <li class="">
                            <a class="thumbnail" id="carousel-selector-@i"><img class="thumbnail-img" src='@images[i].Url'></a>
                        </li>
                        }
                    </ul>

我的原始模板只使用静态图像:

<ul class="hide-bullets">
                                <li class="">
                                    <a class="thumbnail" id="carousel-selector-0"><img class="thumbnail-img" src="images/sommerhuse/ebeltoft/1.jpg"></a>
                                </li>
                                <li class="">
                                    <a class="thumbnail" id="carousel-selector-1"><img class="thumbnail-img" src="images/sommerhuse/ebeltoft/2.jpg"></a>
                                </li>
                                <li class="">
                                    <a class="thumbnail" id="carousel-selector-2"><img class="thumbnail-img" src="images/sommerhuse/ebeltoft/3.jpg"></a>
                                </li>
</ul>

我在每个元素中都包含了完全相同的 CSS 文件，但它们在页面上的显示方式不同。

这是他们在我的原始模板中的样子:http://i.imgur.com/WokI5GP.png

这就是他们在我的 Umbraco 元素中的样子:http://i.imgur.com/LbZaDS9.png

添加到图像的“thumnail-img”类只做两件事:

.thumbnail-img {
  width: 100% !important;
  height: 100% !important;
}

这两个元素都包含具有不同分辨率的图像。

这可能是什么原因造成的？ Umbraco 是否覆盖了我的样式，或者媒体选择器是否改变了图像的显示方式？

Answer 1

回答您的问题:不，媒体选择器不会更改图像，它只会返回 url。

您返回的是完整图像，而第一个屏幕截图使用的是方形图像。

您可以使用 Image Cropper 中的构建自动裁剪图像.

<img src="@Url.GetCropUrl(mediaItem, height: 300, width: 300)" />