正文中插入大图时,让其宽度占满整个内容区宽度

  • A+
所属分类:建博笔记

默认情况下,当我们使用begin主题向正文插入图片宽度大于内容区宽度的大图时,在图片左右两侧会留有空白,就像这样:

正文中插入大图时,让其宽度占满整个内容区宽度

插入大图时默认显示效果

我插入的图片尺寸是1200x400,很明显,在图片左右两侧都留有空白。有时,我们需要让这张图片充满整个内容区的宽度,以达到一定的显示效果。

 

首先,打开style.css文件,在大约2061行的位置,找到代码块

  1. /** 正文 **/
  2. .entry-header h1 {
  3.     positionrelative;
  4.     font-size16px;
  5.     font-size: 1.8rem;
  6.     line-height30px;
  7.     text-aligncenter;
  8.     margin35px -20px 0 -20px;
  9.     padding5px 20px;
  10.     border-left5px solid #3690cf;
  11.     border-right5px solid #3690cf;
  12. }
  13. .header-sub h1 {
  14.     positionabsolute;
  15.     displayblock;
  16.     left: 0;
  17.     top: 0;
  18.     color#fff;
  19.     font-size18px;
  20.     font-size: 1.8rem;
  21.     padding10px 15px;
  22.     max-widthnone;
  23.     border-radius: 3px 0 0 0;
  24.     z-index: 2;
  25.     transition-duration: .5s;
  26.     background#3690cf;
  27. }
  28. #header-img {
  29.     border-radius: 3px;
  30.     transition-duration: .5s;
  31. }
  32. @media screen and (max-width600px) {
  33.     #header-img img {
  34.         width: 180%;
  35.         margin: 0 0 0 -50%;
  36.     }
  37.     .header-sub h1 {
  38.         font-size16px;
  39.         font-size: 1.6rem;
  40.         padding5px 10px;
  41.     }
  42. }
  43. .entry-title-clear {
  44.     margin-bottom40px;
  45. }
  46. .single-content {
  47.     font-size16px;
  48.     font-size: 1.6rem;
  49.     line-height: 1.9;
  50.     margin-top20px;
  51. }
  52. .single-content p a,
  53. .single-content p a:visited {
  54.     color#3690cf;
  55. }
  56. .single-content p a:hover {
  57.     color#444 !important;
  58. }
  59. .single-content p a .be-anchor {
  60.     font-size10px !important;
  61.     margin: 0 2px;
  62. }
  63. .single-content p a:hover .be-anchor {
  64.     color#777;
  65.     animation: blink 0.5s linear infinite;
  66. }
  67. a.fancybox .be-anchor {
  68.     displaynone;
  69. }

在最后一个}后面添加代码

  1. .single-content .full_img {
  2.     margin: 0 -20px;
  3. }
  4. @media screen and (max-width:440px) {
  5.     .single-content .full_img {
  6.         margin10px -15px;
  7.     }
  8. }

然后,在后台编辑文章时,先切换到“文本”模式,在需要插入图片的位置,输入代码

  1. <div class="full_img"></div>

接着,在这段代码中按正常的方式插入图片就可以了。比如:

  1. <div class="full_img">
  2. <a href="https://isdola.com/wp-content/themes/begin/img/contact.png"><img class="aligncenter" src="https://isdola.com/wp-content/themes/begin/img/contact.png" alt="" width="1200" height="400" /></a>
  3. </div>

最后,再切换回“可视化”模式,按正常方式编辑文章就好了。

这里解释一下,div中的.full_img这个class类名可以根据自己的需要修改,只要不和主题原有类名冲突就好,但要保证和CSS里添加的名称一致。

另外,CSS中的-20px这个值的由来是因为它的父div设置了一个padding:20px;

添加代码后的显示效果:

正文中插入大图时,让其宽度占满整个内容区宽度

添加代码后的显示效果

添加前后效果对比如下:

正文中插入大图时,让其宽度占满整个内容区宽度

添加代码前后效果对比

 

如果不想每次添加宽图时,都手动切换到文本模式输入<div class="full_img"></div>,而是想像其他功能一样,点击图标后直接自动生成的话:

首先:打开inc/inc.php文件,在适当位置添加

  1. // 插入宽图
  2. function full_img( $atts, $content = null ) {
  3. extract( shortcode_atts( array (
  4. 'full_img' => '<img class="aligncenter" src="'.$content.'">'
  5. ), $atts ) );
  6. return '<div class="full_img">'.$full_img.'</div>';
  7. }

然后:在同文件中搜索

  1. function begin_select(){

在该函数的适当位置插入

  1. <option value="【full_img】插入宽图【/full_img】">插入宽图</option>

最后:打开js/buttons.js文件,在适当位置添加

  1. ed.addButton( 'full_img', {
  2.     title : '插入宽图',
  3.     icon: 'image',
  4.     onclick : function() {
  5.         ed.selection.setContent('【full_img】插入宽图' + ed.selection.getContent() + '【/full_img】');
  6.     }
  7. });

其中:ico:'image',为该功能图标,可根据需要修改成自己喜欢的。由于不知道后台编辑器如何调用图标,所以使用了添加相册的图标。

操作时请将代码中的【】改为[]

操作完成后,就可以在后台编辑器和插入短代码选项列表中看到新增的插入宽图的图标和列表项了,点击该图标/列表项即可实现自动输入<div class="full_img"></div>

发表评论

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