搜索
搜索

调整图像容器不缩放

Becky 发表于 Dev
32
贝基

我有一个主容器projects-container，然后有两个子容器.project-block和like-work。我在图像中添加了缩放代码，以使其调整宽度和高度的大小以保持正确的比例。这导致了两个单独的问题。第一个问题是我的like-work容器在页面上什至不可见.....在这里看到它。它显示在代码段中，而不显示在页面上。

其次，我无法弄清楚如何project-block-banner通过调整display:none然后display-block在悬停时调整高度来保持隐藏。在设置高度之前，由于overflow：hidden`，它会被隐藏在图像下方，然后在悬停时向上滑动。现在，它只是蠕变到位而不是过渡。

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

$('.project-block img').addClass(function() {
  return (this.width / this.height > 1) ? 'wide' : 'tall';
});
#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;
}
<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>

瑞奇

解决方案：

您可以尝试以下方法，将图像和文本块分别包装在图形标签和无花果标题中。

我更改了以下内容：

  1. 悬停效果从display: none; display:block;到opacity: 0; opacity: 1;
  2. transform(x,y)对于transformY(value)因为你只是转化Y轴
  3. 供应商为订单添加前缀，始终在供应商之后具有主要的css属性。

游乐场：：

JSFiddle

代码片段：

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

ImageMagick：在不缩放图像的情况下调整图像大小

不缩放显示图像

调整屏幕大小时，使用父容器缩放图像

div和图像不缩放，响应速度

numpy调整大小/缩放图像

批量图像调整大小/缩放

如何缩放图像以适合容器？

图像未在容器中缩放

将图像缩放到容器

SVG不缩放

调整图像大小以适合容器

putImageData 不缩放/适合画布中的视频/图像（HTML5、CSS、JS）

如何为UIView制作基于图像的平铺背景，以使其不缩放？

如何在不缩放GIMP的情况下更改图像大小

小于容器时不要缩放图像

缩放我的图像以更好地适应容器

缩放复选框而不缩放内容

MDXRenderer - 自动调整图像到容器

调整Flex Spark图像大小以适合容器

JavaFX 缩放不会调整父容器中组件的大小

动态调整div的CSS缩放以适合容器的大小

缩放图像后如何将图像限制在容器中？

CSS：在<card>内，我想要一张最大高度的图像，并采用所有宽度而不缩放

paintComponent（g）不缩放BufferedImage吗？

CSS转换比例，不缩放子元素

ggsave比例不缩放文字大小

触摸屏无法根据缩放的图像进行调整

使用Jquery .animation进行平滑的图像调整大小和缩放

裁剪，调整大小和缩放图像有什么区别？

TOP 榜单

  1. 1

    蓝屏死机没有修复解决方案

  2. 2

    计算数据帧中每行的NA

  3. 3

    UITableView的项目向下滚动后更改颜色，然后快速备份

  4. 4

    Node.js中未捕获的异常错误，发生调用

  5. 5

    在 Python 2.7 中。如何从文件中读取特定文本并分配给变量

  6. 6

    Linux的官方Adobe Flash存储库是否已过时？

  7. 7

    验证REST API参数

  8. 8

    ggplot：对齐多个分面图-所有大小不同的分面

  9. 9

    Mac OS X更新后的GRUB 2问题

  10. 10

    通过 Git 在运行 Jenkins 作业时获取 ClassNotFoundException

  11. 11

    带有错误“ where”条件的查询如何返回结果？

  12. 12

    用日期数据透视表和日期顺序查询

  13. 13

    VB.net将2条特定行导出到DataGridView

  14. 14

    如何从视图一次更新多行（ASP.NET - Core）

  15. 15

    Java Eclipse中的错误13，如何解决？

  16. 16

    尝试反复更改屏幕上按钮的位置 - kotlin android studio

  17. 17

    离子动态工具栏背景色

  18. 18

    应用发明者仅从列表中选择一个随机项一次

  19. 19

    当我尝试下载 StanfordNLP en 模型时，出现错误

  20. 20

    python中的boto3文件上传

  21. 21

    在同一Pushwoosh应用程序上Pushwoosh多个捆绑ID

热门标签

归档