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>

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

这是屏幕截图：Result

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

注意，这是上传的图片（直...）：Original Picture

Answer 1

这不是Bootstrap，问题是图像元数据。如果你检查它，你会发现：

kMDItemOrientation = 1

因此，在显示图像之前，您的iPhone和计算机正在读取此元数据并更正方向，但浏览器则没有。屏幕截图显示图像，因为它是，而不读取元数据。

请Google了解删除图片元数据（有很多方法取决于您的操作系统），然后在上传之前 true-rotate ，问题就会解决。

Twitter引导图像旋转（不需要的）

1 个答案: