1

我正在写一个项目，每行有 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>

一些照片，根据我看到的水平拍摄的照片，显示得很好（见右边的截图）其他人正在旋转（截图一）

这是屏幕截图：结果

这有什么原因吗？我如何解决它？

请注意，这是上传的图片（直...）：原始图片

4

1 回答 1

10

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

kMDItemOrientation = 1

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

向谷歌询问删除图像元数据（有很多方法取决于您的操作系统），然后在上传之前对其进行真实旋转，问题就会得到解决。

于 2013-10-03T15:06:30.463 回答