Twitter引导图像旋转(不需要的)

Question

我正在写一个项目,每行有3个缩略图.

每个人都有这个代码:

<ul class="thumbnails">
        <?php foreach($list_pjt as $progetto): ?>
            <?= ($row_close_after_three_thumbs == 0) ? '<div class="row-fluid">' : '' ; ?>
            <li class="span4 pjt-thumb" >
              <div class="thumbnail alert-<?= $status_bg ?>">
                <?php
                    $img_thumb_pjt = ($progetto->img == '' || $progetto->img == '0') ? "img/site_basics/pjt_thumb.jpg" : "upload/$progetto->pjt_table/".$this->session->userdata('user_id')."/$progetto->img" ;
                ?>
                <img src="<?= base_url($img_thumb_pjt) ?>" alt="ALT NAME">
                <div class="caption text-center">
                  <h5><?= (strlen($progetto->pjt_name) > 25) ? substr($progetto->pjt_name, 0, 25).'...' : $progetto->pjt_name ?></h5>
                  <p class="badge badge-inverse"><small><?= $type_name ?></small></p>

                  <p><small><?= $this->lang->line('profile_last_mod') ?>:<br><?= timestamp_to_date($progetto->last_mod, $this->session->userdata('lang')) ?></small></p>
                  <p><small><i class="icon <?= $status_icon ?>"></i> <?= $status_txt ?></small></p>
                <?php if($progetto->completato != 0): ?>
                    <p><a href="<?= base_url('project/showpjt/'.$progetto->id_pjt) ?>" class="btn btn-<?= $btn_color ?> btn-block"><?= $this->lang->line('profile_open') ?></a></p>
                <?php else: ?>
                    <p><a href="<?= base_url('project/newpjt/'.$progetto->pjt_table.'/'.$progetto->id_acquisto) ?>" class="btn btn-<?= $btn_color ?> btn-block"><?= $this->lang->line('profile_edit') ?></a></p>
                <?php endif; ?>

                </div>
              </div>
            </li>
        <?php endforeach; ?>
    </ul>

根据我看到的那些水平拍摄的照片,一些照片显示正常(见右侧截图)其他人正在旋转(截图图片一张)

这是截图:结果

有什么理由吗？我如何解决它？

作为注释,这是上传的图像(直...):原始图片

Answer 1

它不是Bootstrap,问题是图像元数据.如果你检查它,你会发现:

kMDItemOrientation = 1

因此,您的iPhone和计算机正在读取此元数据并在显示图像之前更正方向,但浏览器不会.屏幕截图按原样显示图像,无需读取元数据.

请求Google删除图像元数据(有很多方法取决于您的操作系统),然后在上传之前进行真正旋转,问题将得到解决.