jsBin demo

Question

我想在图像2和3上重新创建效果：http://www.jessicahische.is/illustrating/penguinsinbathingsuits

这些图像显然已经由图像本身填充了“填充”，但我想知道这种效果是否可以仅使用jQuery和CSS？

任何帮助或见解都会很棒，谢谢！

Answer 1

用于居中物品的简单方法。尝试这样的事情：

.box {
    display: block;
    height: 500px;
    width: 500px;
    background-color: #eee;
    margin:0;
    padding:0;
    vertical-align:center;
}


.center_item {
    display: block;
    height: 100px;
    width: 100px;
    background-color: #aaa;
    margin:0 auto;
    padding:0;
}

和相应的HTML。

<div class="box">
    <div class="center_item">Put your image here.</div>
</div>

这样做只是将一个容器放在你需要居中的地方。使用margin：0 auto;你可以将其中的任何项目居中。我希望这就是你要找的东西。

Answer 2

jsBin demo

在此示例中，我们使用text-align:center;作为元素#gallery 并强制图像为100%高度。
与 jQuery 相比，我们在.load()上检查该图像，以查看图像宽度是否超出图库宽度。在这种情况下，我们将使用jQuery更改宽度和垂直中心对齐。 E.g：

CSS：

  #gallery{
    position:relative;
    margin:0 auto;
    width:600px;
    height:500px;
    border:1px solid #aaa;
    text-align:center;
  }
  #gallery img{
    height:100%;
  }

jQuery的：

$('#gallery img').load(function(){

  img = $(this);
  imgW = img.width();

  if(imgW > $('#gallery').width()){
    img.css({width:'100%', height:'auto'});
    img.css({marginTop: $('#gallery').height()/2 - $(this).height()/2 });
  }

});

使用图像宽度/高度来查看它们的响应方式。

响应式容器，但图像不占全宽

2 个答案:

jsBin demo