Question

当视口大于图像的宽度时，图像居中，但是当图像的宽度大于视口的宽度时，图像将对齐到左侧而不是中心。我的目标是让图像始终被裁剪到视口的宽度，并始终与中心对齐。

body,
html {
  margin: 0;
  padding: 0;
}

.crop {
  width: 100%;
  height: 50%;
  overflow: hidden;
  background-color: red;
}

#cropped-img {
  position: relative;
  height: 100%;
  display: block;
  margin: auto;
}

<div class="crop">
  <img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" />
</div>

Answer 1

你可以用flexbox实现你想要的东西：

＆＃13;

body,
html {
  margin: 0;
  padding: 0;
}

.crop {
  overflow: hidden;
  background-color: red;
  display:flex;
  justify-content:center;
}

＆＃13;

<div class="crop">
  <img id="cropped-img" src="http://img1.jurko.net/wall/paper/donald_duck_4.jpg" >
</div>

＆＃13;

Answer 2

没关系，我设法使用background-image属性获得了我需要的确切效果。这是我使用的HTML和CSS，如果有其他人感兴趣的话：

HTML：

<div class="crop"></div>

CSS：

body, html {
    margin:0;
    padding:0;
}

.crop {
    width: 100%;
    height: 500px;
    overflow: hidden;
    background-image: url("http://img1.jurko.net/wall/paper/donald_duck_4.jpg");
    background-repeat: no-repeat;
    background-position: center; 
}

Answer 3

尝试为变量值提供占据元素宽度100％的图像

validateOnChange

$form = ActiveForm::begin ( [
        'id' => 'my-form' ,
        'validateOnBlur'=>false,
        'enableAjaxValidation'=>true,
        'validateOnChange'=>false,
] );

大于视口时图像不居中

3 个答案: