如何使 Joomla Intro Image 在博客布局中响应

Question

我想问一下如何使 Joomla Intro Image 响应。当我处理死胡同时，我还没有成功让它响应。我目前正在使用 Joomla 3.4.4

创建一个基于 Bootstrap 的模板

我正在尝试做的事情：

但我无法使介绍图像缩略图响应：

代码如下：

<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

单行CSS:

即可简单修复

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

如果您有实时页面或 Fiddle，将很容易向您展示修复方法。
问候
纳比尔

Answer 2

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>

此外，您在第二行有一个结束符而没有一个开始符。此外，您不需要在第一行之后添加 < br>，只需将其删除或替换为 clearfix div。如果您需要更多 space，请改用 css margin-bottom。

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

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

如何使 Joomla Intro Image 在博客布局中响应

How to make Joomla Intro Image Responsive in Blog Layout

css

php

joomla

twitter-bootstrap