begin主题带图相关文章模块的CSS样式修复

最近发现,begin主题的相关文章里面的图片,好像有问题。在文章图片比较偏长方形的时候,就会发现问题了。

begin主题带图相关文章模块的CSS样式修复

我们用谷歌审核元素,可以发现CSS里面,height和width都是auto。那么,我们尝试定义一下高度。

begin主题带图相关文章模块的CSS样式修复

把height设置为何其他图片一致的130px的高度。这个时候,出现另一个BUG,有的图片会出现空白区。那么,我们修改宽度的auto为“100%”

begin主题带图相关文章模块的CSS样式修复

OK,修改到这里,就完成了,但是在缩小屏幕的时候会发现有一点拉长,继续缩小则换行排成两行。这个由media决定啥时候换行。大家可以参考我们前面的文章提到的media控制。可以在调节适当的宽度。或用media在适当的宽度下重新定义高度。都是可以的。

CSS代码:style.css 1764行

  1. .related-site-img a img {
  2.     max-width: 100%;
  3.     width: 100%; /* 原auto */
  4.     height130px/* 原auto */
  5.     -webkit-transition: -webkit-transform .3s linear;
  6.     -moz-transition: -moz-transform .3s linear;
  7.     -o-transition: -o-transform .3s linear;
  8.     transition: transform .3s linear
  9. }

如果要改media变4列的宽度,修改 1795 行

  1. /* 原来的480px 改为580px 或者自己调整自己喜欢的数值 */
  2. @media screen and (min-width580px) {
  3. .r4 {
  4.     floatleft;
  5.     width: 25%;
  6. }
  7. }

到这里就OK了。或者自己根据media属性,去定义“.related-site-img a img”里的height值也可以。

PS:还是那句话,这些是提供思路,自己自由发挥哈。

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

目前评论:3   其中:访客  3   博主  0

  1. avatar 囧rz的网站 1

    既然来了,还是留个脚印吧!

  2. avatar 鱼昆 1

    完美解决了这个问题,谢谢分享哦 :lol:

评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

图片 表情