调整图像大小 - 保持比例 - 没有背景图像

Posted 2023-03-05

【中文标题】调整图像大小 - 保持比例 - 没有背景图像

【英文标题】：Resize image - keep ratio - without background image

【发布时间】：2017-08-24 04:24:14

【问题描述】：

我正在尝试实现本站显示的效果：

http://fofwebdesign.co.uk/template/_testing/scale-img/target-ratio-resize.htm

但是这个网站使用 div 的背景图片来做到这一点。我不能使用背景图像，因为图像在 Wordpress 中，并且它是使用以下代码动态引入的：

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

所以我尝试了相同的方法并尝试了以下方法，尝试将图像作为背景图像引入：

.featured-image 
  max-width: 960px;
  /* actual img width */
  max-height: 150px;
  /* actual img height */*
  height: 150px;
  /* actual img height - IE7 */
  background-image: <?php the_post_thumbnail(); ?>;
  background-size: cover;
  background-position: center;

并使用这个：

background-image: url(<?php the_post_thumbnail(); ?>);

唉，我似乎无法让它工作 - 我什至不确定我是否可以在 CSS 文档中使用 PHP...

所以我正在寻找一种方法来在不使用背景图像的情况下仅在以下类上实现此图像调整大小...

<div class="featured-image">
   <?php the_post_thumbnail(); ?>
</div>

任何帮助将不胜感激 - 我什至不知道我是否正确地考虑它或者我错过了什么 - 谢谢！

我在这里尝试实现的示例：

【问题讨论】：

在 div 里面。 运行？

new.leicesterymca.co.uk/wp-content/uploads/2017/01/house.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" srcset="new.leicesterymca.co.uk/wp-content/uploads/2017/01/house.jpg 3200w, new.leicesterymca.co.uk/wp-content/uploads/2017/01/… 300w, new.leicesterymca.co.uk/wp-content/uploads/2017/01/… 768w, new.leicesterymca.co.uk/wp-content/uploads/2017/01/… 700w" sizes="(max-width: 3200px) 100vw, 3200px">

不是 100% 确定 DOM 是什么 - 但它会输出：

正是我需要看到的 :) 这是一个巨大的图像。我会尝试在 DIV 中使用 IMG 标签来解决问题。 DOM 外行术语，基本上就是你页面的源代码。实际上，它不止于此。阅读它不会有什么坏处。也会帮助你更多地理解 html。无论如何它对我有帮助。

我一定会调查 DOM！ :) 谢谢

【参考方案1】：

我希望您使用的是 Bootstrap，不要将图像用作背景，而是将其与正确的 <img> tag 一起使用，并将 img-fluid 和 d-block 类添加到图像标签中。

【讨论】：

我正在使用引导程序！我会试试看的:)

让我知道输出。

我试过了，但它似乎不起作用 - 这是它在new.leicesterymca.co.uk/youth-community/support-us/…上输出的页面

对我来说看起来不错。它正在正确调整大小，没有任何问题。尝试清除您的缓存并刷新页面。

它不像我提供的示例那样工作

【参考方案2】：

为了创建所需的效果，他们为 background-image 包装类提供了 padding-top 属性。并将图像限制为max-height，因此它不会变得比这更大。其余的都是 CSS。

您希望它是动态 image，现在您可以使用后端代码更改style 标记值

.section 
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  max-height: 150px;
  /* restricted image height */


.section:before 
  content: '';
  display: block;
  width: 100%;
  padding-top: 33.333%;
  /* this is not as per formula, but as a custom aspect ratio */

<div class="section" style="background-image: url('http://fofwebdesign.co.uk/template/_testing/scale-img/students.jpg')">


</div>

<h1>When you want to keep the aspect ratio in background images use below formula</h1>
<code>((image height * 100%) / image width)</code>

【讨论】：

我可以看到他们是如何做到的 - 但这不起作用，因为我需要图像（图像 url）是动态的。

在style 标签中添加您的图片标签。我会为你修改我的代码

【参考方案3】：

尝试使用内联CSS 在您的HTML 模板中实现它，如下所示：

<div 
    class="featured-image" 
    style="background-image:url(<?php the_post_thumbnail_url('full'); ?>);">
</div>

然后使用CSS正确显示image：

.featured-image
   display:inline-block; /** or block, whichever suits your design **/
   background-size:cover;
   background-repeat:no-repeat;

使用这种方法，您甚至可以在“精选图像” div 内的图像上显示更多元素。

我刚刚更新了这个答案以输出帖子缩略图url，而不是使用默认的img 标签。

【讨论】：

来自 PHP 的图像位于 img 标签内。不要认为这会起作用。

是的，我刚试了一下，这个位不起作用：background-image:url();这也是我的第一个想法！

我的错，我刚刚更新了输出图像 url 的代码，而不是使用 img 标签，请参阅以下部分：the_post_thumbnail_url( 'full');

嗨 - 感谢您的更改 - 但是我似乎仍然无法获得： background-image:url();工作 - 恐怕它不会通过任何图像......

【参考方案4】：

可能有一种更简单的方法，但使用 Jquery 就可以了。不要以为你真的需要我的 CSS，除了 position:relative 的图片。

https://jsfiddle.net/ny746vLx/2/（非 WordPress）

jquery如下：

$(".featured-image>img").each(function(i, img) 
    $(img).css(
        left: ($(img).parent().width() - $(img).width()) / 2
    );
);

https://jsfiddle.net/ny746vLx/4/ (Wordpress)

;(function($)
    imageChange = function()
        $(".featured-image>img").each(function(i, img) 
        $(img).css(
            left: ($(img).parent().width() - $(img).width()) / 2
        );
    );

    $(window).resize(imageChange); 
)(jQuery);

imageChange();

这会将图像物理地向左移动到足以使图像居中。

jQuery 选择器'>' 意味着它将直接定位在 .imageContainer div 之后的所有 img 标签。您也可以在 CSS 中使用这些声明。

编辑：我使用了您在上面打印的类。不要认为你需要从小提琴中改变任何东西。只需记住添加 position:relative to your css for image。

EDIT2：我添加了另一个可以（希望）与 wordpress 一起使用的小提琴。 jQuery 与它有一些冲突。有更简单的方法，但我真的不熟悉 jQuery 中的冲突。

【讨论】：

非常感谢这个 Gezzasa - 我会试一试，看看它是否适合我

嗨 - 恐怕这似乎不起作用 - 这就是我得到的：new.leicesterymca.co.uk/theatre/get-creative/exhibit 它仍然缩小了图像的高度并且边缘仍然粘在边缘...主要是确保图像比当前在移动设备上更大（高度）:) 我也用屏幕模型更新了我的问题

它有效:)。普通的 jQuery 与 WordPress 冲突。修复了第二小提琴中的代码。

【参考方案5】：

必须是 get_the_post_thumbnail_url。

<?php if (have_posts()): while (have_posts()) : the_post(); ?>
    <div class="featured-image" style="background-image:url(<?php echo get_the_post_thumbnail_url('full');?>);"></div>
<?php endwhile; endif; ?>

.featured-image 
background-size: cover;
background-position: center;