Question

这里的图像越来越小。我还想在中心对齐图像.pLEASE告诉一些解决方案，使图像位于中心并以原始大小显示。我使用bootstrap。

    <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;
            }

Wnat想象处于垂直和水平中心，图像大小为1366 * 635

Answer 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中删除float

编辑：我希望你能在页面的中心添加宽度＆amp;父亲div的高度使位置相对

将其添加到图像

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

或者您可以使用display：table

来使用vertical-align属性

如果您想要图像的原始尺寸，请使用此

<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>

否则使用flex

在父div中添加此css

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

Answer 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。

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

2 个答案: