调整图像容器不缩放

时间：2016-06-24 14:27:47

标签： jquery html css image css3

我有一个主容器projects-container，然后是两个子容器.project-block和like-work。我添加了缩放代码到我的图像，以便它调整宽度和高度，以保持正确的比例。这导致了两个单独的问题。第一个问题是我的like-work容器甚至不再显示在页面上.....看到它直播here。它显示在代码段上，但不显示在页面上。

其次，我无法弄清楚如何通过在悬停时执行project-block-banner然后display:none来调整高度来保持display-block隐藏。在我设置高度之前，它会被隐藏在图像下面，因为溢出：隐藏，然后在悬停时向上滑动。现在它只是放到位而不是过渡。

有谁知道我能为这两个问题做些什么？我不确定我的图像大小调整是否是所有这些的根，如果有，是否有更好的方法来调整图像大小？

＆＃13;
＆＃13; 
$('.project-block img').addClass(function() {
  return (this.width / this.height > 1) ? 'wide' : 'tall';
});
＆＃13; 
#projects-container {
  height: auto;
  width: 100%;
}
.project-block {
  width: 33.33333333333333333333333333%;
  height: 60%;
  display: inline-block;
  overflow: hidden;
}
.mobile {
  display: none;
}
.project-block img {
  width: 100%;
  height: 100%;
  -webkit-transition-duration: .7s;
  transition-duration: .7s;
  position: relative;
}
.project-block img.wide {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  width: 100%;
}
.project-block img.tall {
  max-width: 100%;
  max-height: 100%;
  width: auto;
}
.project-block img:hover {
  transform: translate(0, -65px);
  -webkit-transform: translate(0, -65px);
  -webkit-transition-duration: .7s;
  transition-duration: .7s;
}
.project-block-banner {
  position: relative;
  width: 100%;
  height: 150px;
  bottom: -.00000000000001;
  background: #00a16d;
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  display: none;
}
.project-block-banner-container {
  padding: 40px 50px;
}
.project-block-banner-container a {
  text-decoration: none;
}	
.project-block img:hover + .project-block-banner {
  transform: translate(0, -150px);
  -webkit-transform: translate(0, -150px);
  -webkit-transition-duration: .5s;
  transition-duration: .5s;
  display: block;
}
.project-block-banner-name, .project-block-banner-description {
  color: #FFF;
  text-decoration: none;
}
.project-block-banner-name {
  font-size: 1.8em;
  margin-bottom: 10px;
}
.project-block-banner-description {
  font-size: 1.2em;
}

/*---Like Work----*/
#like-work {
  background: #0085a1;
  width: 66.66666666666666666666%;
  display: inline-block;
  height: 60%;
  vertical-align: top;
  position: relative;
}
#like-work-container {
  padding: 0 100px;
}
#like-title, #like-title2, #like-links {
  color: #FFF;
}
#like-title {
  font-size: 2.5em;
  margin-bottom: 35px;
}
#like-title2 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin-bottom: 65px;
}
#like-links a {
  font-size: 1.2em;
}
#like-links a {
  text-decoration: none;
}
#like-links-button {
  padding: 15px 20px;
  border: 2px solid #FFF;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
  color: #FFF;
}
#like-links-button:hover {
  border: 2px solid #FFF;
  background: #FFF;
  color: #0085a1;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="projects-container">
  <div class="project-block">
    <a href="projects/eslich-wrecking"><img src="http://optimumwebdesigns.com/images/work/eslich.jpg" alt="" class="desktop"><div class="project-block-banner">
      <div class="project-block-banner-container">
        <div class="project-block-banner-name">fgds gfdsgfds</div>
          <div class="project-block-banner-description">gfdgs gfdsg fgsgsg</div>
        </div>
      </div>
    </a>
  </div>
  <div id="like-work">
    <div id="like-work-container" class="total-center">
    <div id="like-title">gfdg dfsg sdfg sdg</div>
    <div id="like-title2">gfd gfds gfds gfsd gfds fd</div>
    <div id="like-links"><a href="discuss-project"><span id="like-links-button">DISCUSS DESIGN PROJECT</span></a></div>
  </div>
</div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

<强> SOLUTION：

这是您可以尝试的方法，将图像和文本块分别包装在图形标记和图形中。

我更改了以下内容：

  1. 从display: none; display:block;到\ n的悬停效果 opacity: 0; opacity: 1;
    2. 因为你是公正的，所以{li> transform(x,y)代表transformY(value) 转换Y轴
  2. 供应商前缀订单，始终具有主css属性 在供应商之后。

    3. <强> PLAYGROUND：：

    JSFiddle

    CODE SNIPPET 

    *::after,
*::before {
  content: "";
  display: block;
  clear: both;
}

#projects-container {
  height: auto;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.project-block {
  width: 33.33333333333333333333333333%;
  overflow: hidden;
  float: left;
  display: flex;
  flex-direction: column;
}

.mobile {
  display: none;
}

.project-block img {
  max-width: 100%;
  height: auto;
  display: block;
  -webkit-transition-duration: .7s;
  transition-duration: .7s;
  position: relative;
}

.project-block figure:hover img {
  -webkit-transform: translateY(-65px);
  transform: translateY(-65px);
}

.project-block a {
  display: block;
}

.project-block figure {
  overflow: hidden;
  margin: 0;
  position: relative;
}

.project-block figcaption {
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  background-color: #00a16d;
  color: #ffffff;
  height: 150px;
  width: 100%;
  top: auto;
  bottom: 0;
  opacity: 0;
  -webkit-transform: translateY(100%);
  -moz-transform: translateY(100%);
  -ms-transform: translateY(100%);
  transform: translateY(100%);
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 0.5s, opacity 0.1s 0.3s;
  -moz-transition: -moz-transform 0.5s, opacity 0.1s 0.3s;
  transition: transform 0.5s, opacity 0.1s 0.3s;
}

.project-block figure:hover figcaption {
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.5s, opacity 0.1s;
  -moz-transition: -moz-transform 0.5s, opacity 0.1s;
  transition: transform 0.5s, opacity 0.1s;
}

.project-block-banner-container {
  padding: 40px 50px;
}

.project-block-banner-container a {
  text-decoration: none;
}

.project-block-banner-name,
.project-block-banner-description {
  color: #FFF;
  text-decoration: none;
}

.project-block-banner-name {
  font-size: 1.8em;
  margin-bottom: 10px;
}

.project-block-banner-description {
  font-size: 1.2em;
}


/*---Like Work----*/

#like-work {
  background: #0085a1;
  width: 66.66666666666666666666%;
  float: left;
  position: relative;
  display: flex;
  flex-direction: column;
}

#like-work-container {
}

#like-title,
#like-title2,
#like-links {
  color: #FFF;
}

#like-title {
  font-size: 2.5em;
  margin-bottom: 35px;
}

#like-title2 {
  font-size: 1.3em;
  line-height: 1.3em;
  margin-bottom: 65px;
}

#like-links a {
  font-size: 1.2em;
}

#like-links a {
  text-decoration: none;
}

#like-links-button {
  padding: 15px 20px;
  border: 2px solid #FFF;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
  color: #FFF;
}

#like-links-button:hover {
  border: 2px solid #FFF;
  background: #FFF;
  color: #0085a1;
  -webkit-transition: ease-in-out .5s;
  transition: ease-in-out .5s;
}

.total-center {
  text-align: center;
}
    <div id="projects-container">
  <div class="project-block">
    <a href="projects/eslich-wrecking">
      <figure>
        <img src="http://optimumwebdesigns.com/images/work/eslich.jpg" alt="" class="desktop">
        <figcaption>
          <div class="project-block-banner">
            <div class="project-block-banner-container">
              <div class="project-block-banner-name">fgds gfdsgfds</div>
              <div class="project-block-banner-description">gfdgs gfdsg fgsgsg</div>
            </div>
          </div>
        </figcaption>
      </figure>
    </a>
  </div>
  <div id="like-work">
    <div id="like-work-container" class="total-center">
      <div id="like-title">gfdg dfsg sdfg sdg</div>
      <div id="like-title2">gfd gfds gfds gfsd gfds fd</div>
      <div id="like-links"><a href="discuss-project"><span id="like-links-button">DISCUSS DESIGN PROJECT</span></a></div>
    </div>
  </div>
</div>

相关问题
最新问题