Question

要求是我需要实现某种形式的 Bootstrap网格系统。我决定在页面上的每张图像上都添加带有文字说明的自适应图像，因此当从桌面查看图像时，这些图像是并排放置的；从移动设备查看时，这些图像将包含文本进行堆叠。

这是我的HTML代码

nip

Answer 1

使用内联块

    .img-responsive{
        display: inline-block;
        max-width: 100%;
        height: auto;
    }

<div class="container borderColor" >
          <h1 id="example-id-name" class="centered-text sansSerif-text">STOR/E</h1>
           <p class="centered-text"> Every great story begins on a blank page </p> 


           <div class="row">
    <div class="col-sm-6 img-responsive ">
        <img src="https://i.imgur.com/kTa0GuA.png" alt="book one">
    </div>
    <div class="col-sm-6 img-responsive ">
        <img src="https://i.imgur.com/kTa0GuA.png" alt="book two">
    </div>
</div>

Answer 2

您可以使用float或inline-block / block。我插入了一些任意数字，但这是这样的：

.img-responsive{
    display: block;
    max-width: 100%;
    width: 25%;       /* or whatever you want*/
    height: auto;
    float: left;
}

@media only screen and (max-width: 600px) {   /* or whatever your mobile width is */
    .img-responsive {
        float: none;
        width: 100%;
    }
}

Answer 3

我通过期望您正在使用bootsrap来提供此代码如果您正在使用引导程序，则无需任何CSS 只需使用此代码

商店每个伟大的故事都始于空白页

       <div class="row">
<div class="col-sm-6 col-xs-12 ">
    <img class=" img-responsive"  src="images/book1" alt="book one">
</div>
<div class="col-sm-6 col-xs-12">
    <img class=" img-responsive" src="images/book2" alt="book two">
</div>

无论您的图片有多大，它都会显示自适应

Answer 4

弄明白了，谢谢您的指导

Event.includes(assistants: :transaction_saras).all.each do |event|
  p event.assistants # this will be a list of assistants for that event
  p event.assistants.first.transaction_saras.first
end

引导图像响应抓地力

4 个答案: