如何更改主页中的帖子缩略图大小答案

【问题标题】：How to change post thumbnail size in home page如何更改主页中的帖子缩略图大小
【发布时间】：2020-03-28 23:23:33
【问题描述】：

我想更改我在移动设备视图中的主页中帖子缩略图的大小。我是在台式机和平板电脑上完成的，但我无法在移动设备上完成。我的网站是 www.aytepignosi.com。正如您在屏幕截图中看到的那样，现在的缩略图太小了。我想让它们像在桌面视图中一样，这意味着：图像居中并根据屏幕大小自动调整大小。我用于桌面的 CSS 是：

.post-body img {
width:100%;
height:100%;
display: block;
}

如果这也适用于帖子标题，同样仅适用于移动视图中的主页。当我打开一个帖子时，一切似乎都很好。先感谢您。（我用博主）

这是最新帖子图片的html：

<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-b_CL20DIHaY/Xn9AAIf_hBI/AAAAAAAAIc0/LIgULtr32mcItRO67cQ9NMJDyegolowwQCLcBGAsYHQ/s1600/%25CE%25B5%25CE%25BA%25CF%2587%25CE%25B1%25CF%2581%25CF%2584%2B%25CF%2584%25CE%25BF%25CE%25BB%25CE%25BB%25CE%25B5%2B%25CF%2580%25CE%25B1%25CE%25BD%25CE%25B4%25CE%25B7%25CE%25BC%25CE%25B9%25CE%25B1%2B2%2B%25282%2529.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" data-original-height="644" data-original-width="1145" height="111" src="https://1.bp.blogspot.com/-b_CL20DIHaY/Xn9AAIf_hBI/AAAAAAAAIc0/LIgULtr32mcItRO67cQ9NMJDyegolowwQCLcBGAsYHQ/s1600/%25CE%25B5%25CE%25BA%25CF%2587%25CE%25B1%25CF%2581%25CF%2584%2B%25CF%2584%25CE%25BF%25CE%25BB%25CE%25BB%25CE%25B5%2B%25CF%2580%25CE%25B1%25CE%25BD%25CE%25B4%25CE%25B7%25CE%25BC%25CE%25B9%25CE%25B1%2B2%2B%25282%2529.png" width="200" /></a></div>

【问题讨论】：

"I can't do it on mobile" - 你在使用媒体查询吗？如果没有，请查找媒体查询。在移动媒体查询中为每个屏幕尺寸指定所需的宽度，并将高度设置为自动（这样图像就不会倾斜）。祝你好运
我根本不知道什么是媒体查询。能具体点吗？
在 stackoverflow 中输入媒体查询并阅读标签描述。这里是睡觉时间。
我不明白该怎么做。我读了一点，但我不知道从哪里开始。我想我需要一个CSS代码来做到这一点。如何使用媒体查询？抱歉，我对编写代码不太熟悉。我可以做一些基本的事情。我希望有人更具体一点。谢谢。
有人可以帮我解决我的问题吗？

标签： html css media-queries

【解决方案1】：

尝试在您的 CSS 文件中添加此 CSS 代码：

@media screen and (max-width:767px){
    .mobile-index-title{
        width:100%;
    }

    .post-body img, .post-body .tr-caption-container, .Profile img, .Image img, .BlogList .item-thumbnail img{
        max-width:100%;
    }

    .mobile-index-thumbnail{
        float:none;
        text-align:center;
    }
}

【讨论】：

谢谢 Elman Huseynov。我用了你的代码。标题是固定的，缩略图居中，但它们仍然太小。它们的大小没有改变。我希望我可以在这里上传一个屏幕截图，以便您查看。所以尺寸还有待修复。
@NikosBatras 桌面设备上的图像尺寸也很小，这就是为什么在移动设备上也是如此。给我一个链接，其中图片在桌面上很大，然后我将更新我的代码以使其在移动设备上变小。
谢谢。我的网站是 www.aytepignosi.com。桌面上的图像不小。
@NikosBatras 你截图上的图片在侧边栏，这也是桌面上的小图片。
不，截图上的图片不在侧边栏中。它们位于网站的主要中心区域。这些是我每天更新的帖子，而不是侧边栏。当您向下滚动时，桌面侧边栏位于左侧，而移动视图中的侧边栏朝向末端。