【问题标题】:Cant resize images on boostrap columns无法调整引导列上的图像大小
【发布时间】:2015-12-17 06:47:46
【问题描述】:

所以我对 HTML/CSS 还是很陌生,我正在从 CodeAcademy 学习这一课,我正在尝试复制这一点:https://s3.amazonaws.com/codecademy-content/projects/junction/index.html

问题是我无法让中间的那些图像看起来更大,它们非常小,而且我不知道如何调整它们的大小。

这是我的版本:https://jsfiddle.net/eb3roj0j/1/

 <!--supporting-->
  <div class="supporting">
    <div class="container">
      <div class="row">
        <div class="col-md-4">
          <img src="https://goo.gl/HuNcSi" class="img-responsive" alt="">
          <h2>Read</h2>
          <p>Discover new stories and follow your favorite writers.</p>
        </div>
        <div class="col-md-4">
          <img src="https://goo.gl/Vxo5z5" class="img-responsive" alt="">
          <h2>Write</h2>
          <p>Create stories about our world, or entirely new worlds.</p>
        </div>
        <div class="col-md-4">
          <img src="https://goo.gl/93x9GD" class="img-responsive" alt="">
          <h2>Talk</h2>
          <p>Join the conversation by talking with your favorite readers and your fans.</p>
        </div>
      </div>
    </div>
  </div>

【问题讨论】:

    标签: html css image resize


    【解决方案1】:

    在你的 CSS 中你有:

    .row img
    {
        position: relative;
    
        float: left;
    
        max-width: 35px;
        max-height: 35px;
    }
    

    这限制了您的图像大小

    【讨论】:

    • 我假设您这样做是为了限制页面上的其他内容。这有点太宽泛了。你应该分配任何你想约束它自己的 ID 或 CLASS 的元素,然后专门约束它。
    • 别觉得愚蠢,这只是学习的一部分。关于您的帖子最好的一点是您记录了它并为我们创建了一个示例来帮助您。
    • 是的!这是导航栏上的标志,非常感谢您的提示。非常感谢
    • 所以将 ,row img 更改为 .logo,并将 .logo 作为一个类添加到您的元素中。您将使用类而不是 ID,因为您可能会在同一页面上再次使用该类。 ID 必须是唯一的
    • 再次感谢您,在我的学习过程中一定要记住一些事情。
    猜你喜欢
    • 2016-01-12
    • 2014-08-09
    • 1970-01-01
    • 2013-06-25
    • 1970-01-01
    • 2020-05-10
    • 2018-06-07
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多