如何在Blog布局中使Joomla简介图像具有响应性

Question

我想问一下如何使Joomla Intro Image响应。 当我要处理死胡同时，我还没有成功使其响应。 我目前正在使用Joomla 3.4.4创建基于Bootstrap的模板

我正在尝试做的事情：

但我无法使Intro Image缩略图响应：

这是代码：

 <div class="news-item"> <div class="row"> <div class="col-xs-12 col-sm-offset-1"> <a href="<?php echo $link; ?>"><h3 class="news-title"><?php echo $this->escape($this->item->title); ?></h3></a> </div> </div><br> <div class="row"> <div class="hidden-xs col-sm-1"> <span class="date"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('d'))); ?></span><br><span class="month"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('M'))); ?></span> </div> <div class="col-xs-4 col-sm-3"> <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?> </a> </div> <div class="col-xs-8 col-sm-8"> <?php echo JHtmlString::truncate(strip_tags($this->item->text), 400); ?> <a href="<?php echo $link; ?>">Read More</a> </div> </div> </div> 

对于此特定代码，任何建议将不胜感激：

 <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?> 

提前致谢！

Answer 1

gw2不错的一个:)但是想念旧的gw。

顺便说一句，您的代码没有容器（或者可能没有容器？）：

    <div class="news-item container">  
  <div class="row">
    <div class="col-xs-12 col-sm-offset-1">
      <a href="<?php echo $link; ?>"><h3 class="news-title"><?php echo $this->escape($this->item->title); ?></h3></a>
    </div>
  </div>  
  <div class="clearfix"></div>
  <div class="row">
    <div class="hidden-xs col-sm-1">
      <span class="date"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('d'))); ?></span>
      <br/>
      <span class="month"><?php echo JText::sprintf( JHTML::_('date',$this->item->publish_up, JText::_('M'))); ?></span>
    </div>
    <div class="col-xs-4 col-sm-3">
      <?php echo JLayoutHelper::render('joomla.content.intro_image', $this->item); ?>
    </div> 
    <div class="col-xs-8 col-sm-8">
      <?php echo JHtmlString::truncate(strip_tags($this->item->text), 400); ?>
      <a href="<?php echo $link; ?>">Read More</a>
    </div> 
  </div>
</div>

另外，您在第二行中有一个关闭</ a>，而没有一个开头。 此外，第一行后不需要<br>，只需将其删除或替换为clearfix div。 如果需要更多空间，请使用css margin-bottom代替。

如果要管理介绍图片，则可以查看以下文件夹来修改html输出：template / your_template / html / layouts / joomla / content / intro_image或从根目录仅查看layouts / joomla / content / intro_image

希望对您有帮助，祝您好运！

Answer 2

只需用一行CSS即可解决：

img.[image-class]{ max-width:100%;}

如果您有实时页面或Fiddle，将很容易向您显示此修复程序。
问候
纳比尔