图像缩小并显示在屏幕中间答案

【问题标题】：Image getting shrink and display in middle of screen图像缩小并显示在屏幕中间
【发布时间】：2016-10-09 20:07:36
【问题描述】：

这里的图像变得非常小。而且我还想在中心对齐图像。请告诉一些解决方案，以便图像位于中心并以原始尺寸显示。我正在使用引导程序。

    <div class="container" style="height: 100%;">

            <div class="col-sm-4 col-md-4 col-lg-4"></div>
            <div class="col-sm-4 col-lg-4" style="height: 100%;display: table;">

                <a href="machine1.php" style="display : table-cell;vertical-align: middle;">

                    <img src="ft/text.png" class="img-responsive" style="min-width:660px;">
                </a>

            </div>
            <div class="col-sm-4 col-md-4 col-lg-4 ">



            </div>

.body-wrapper {
            background: url('slide2_2.png');
            background-size: cover;
            height:100%;
        }
            html, body{
            height:100%; 
            margin:0;
            padding:0;
            color:white;
        }

            a:hover{
                text-decoration: none;
            }

            .img-responsive{
                float: left;
            }

图像位于垂直和水平中心，图像大小为 1366* 635

【问题讨论】：

你能把你想要达到的目标说得更清楚吗？图像的尺寸是多少或您希望它是什么尺寸？您想如何将其居中，在哪里？在 body 元素中水平放置？

标签： html css twitter-bootstrap-3 responsive-design

【解决方案1】：

我不确定你想要什么如果你想让图片居中，试试这个

https://jsfiddle.net/0fcpr65u/4/

<div class="container" style="height: 100%;">
        <div class="col-sm-4 col-md-4 col-lg-4"></div>
        <div class="col-sm-4 col-lg-4" style="text-align:center">
            <a href="machine1.php">
                <img src="http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.preview.jpg" class="img-responsive" style="width:200px;margin: auto;">
            </a>
        </div>
</div>

从图像 css 中删除浮动

编辑：如果您希望它位于页面的中心将宽度和高度添加到父 div 使其位置相对

将其添加到图像中

width: 200px;
position: absolute;
top: calc(50% - 100px);
left: calc(50% - 100px);

或者您可以通过 display:table 使用垂直对齐属性

如果你想要图像的原始大小，请使用这个

<div class="container" style="height: 100%;">
  <div class="col-sm-4 col-md-4 col-lg-4"></div>
  <div class="col-sm-4 col-lg-4" style="height: 100%;display: table; width:100%">
    <a href="machine1.php" style="display:table-cell;vertical-align: middle;text-align: center;">
      <img  src="http://webneel.com/wallpaper/sites/default/files/images/01-2014/2-flower-wallpaper.preview.jpg">
    </a>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4 ">
</div>

其他使用弹性

通过在父 div 中添加这个 css

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

【讨论】：

thanx 快速回复......图像仍然很小并且粘在屏幕顶部我希望 img 在屏幕中间以全尺寸显示
我尝试了我的代码，它将图像保持在中心，您可以使用宽度更改大小
添加了 jsFiddle 链接，您可以查看
垂直中间也
为什么要为元素使用表格和表格单元格？使用 flexbox
不是更容易吗？

【解决方案2】：

https://jsfiddle.net/ws4n0kh0/

试试这个。

<div class="container" style="height: 100%;">
  <div class="col-sm-4 col-md-4 col-lg-4"></div>
  <div class="col-sm-4 col-lg-4" style="height: 100%;display: table; width:100%">
    <a href="machine1.php" style="display:table-cell;vertical-align: middle;text-align: center;">
      <img src="https://www.cs.cmu.edu/~chuck/lennapg/len_std.jpg">
    </a>
  </div>
  <div class="col-sm-4 col-md-4 col-lg-4 ">
</div>

还从 CSS 中删除了 img-responsive。

【讨论】：