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

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

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

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

});

播放图像的宽度/高度，以查看它们的反应。