Umbraco 7 中的缩略图没有继承 CSS答案

【问题标题】：Thumbnails not carrying over CSS in Umbraco 7Umbraco 7 中的缩略图没有继承 CSS
【发布时间】：2018-02-03 09:14:47
【问题描述】：

我无法让我的缩略图在我的 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 是覆盖了我的样式，还是媒体选择器改变了图像的显示方式？

【问题讨论】：

可能是静态图像示例具有不同的分辨率但相同的高度？ .可以将宽度和高度固定为特定的图像尺寸吗？
其中一张静态图片的高度不同，但与其他图片水平对齐。固定宽度和高度可能会起作用。
试着把 % 改成 px 看看是不是你想要的？例如：宽度：100px；高度：100px；或者你可以做 width : 100%;高度：100px;

标签： html css umbraco media thumbnails

【解决方案1】：

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

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

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

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

【讨论】：