Photo cover in WooCommerce

时间：2019-10-21 作者：Valdemar - memo ict

今天我在做https://www.vanleeuwenemmen.nl/winkel/ 网站但是那里的图像是不正确的，因为我已经将img设置为object-fit:contain，但是如果我将其留空，那么它就是一张放大的奇怪照片。

有人能帮我吗？

1 个回复
SO网友:Arsalan Mithani

您正在使用裁剪图像。您的图像是300x300裁剪的，而剖面更大。您的第一个div已设置为40%宽度，因此限制image 在那一部分中达到40%是没有意义的。使用大小合适的缩略图或实际图像。

这是我用实际图像得到的结果/3dcc1cba-c209-4a1a-a1f2-edd17fc8b58e.jpg &；NOT 3dcc1cba-c209-4a1a-a1f2-edd17fc8b58e-300x300.jpg 使用以下CSS：

.woocommerce li.product .entry-featured img {
    display: flex;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

enter image description here

标签： woocommerce-offtopic   css   html   小码农  

相关推荐

将CodeMirror编辑器用于同一页面上的CSS和HTML

我正在尝试加载CodeMirror编辑器以用于插件后端。有些文本区域用于HTML，有些用于CSS。我对WP开发非常陌生，请原谅我的无知，但这样做： add_action(\'admin_enqueue_scripts\', \'joermo_enqueue_scripts\'); function joermo_enqueue_scripts($hook) { $joermo_html_code[\'ce_html\'] = wp_enqueue_code_e