【问题标题】:CSS: Image Responsive full Height no stretchingCSS:图像响应全高无拉伸
【发布时间】:2018-02-08 16:38:54
【问题描述】:

我一直在练习制作一些网页。长话短说,从 365psd.com 下载了一个 psd,并一直在尝试重新创建它的设计,例如只是弄乱了它的主题。

我有一个旋转木马,它是使用带有三张图像的 CSS 动画创建的。旋转木马本身工作正常,在全尺寸时看起来不错。虽然当我将浏览器缩小到更小的尺寸时,图像不会拉伸其高度以填充整个区域,因此它会在导航之前在图像下方留下一个大的黑色区域。

我试过使用 Height 100% width auto 确实有效,但图像会拉伸。我很好奇是否有一种方法可以最大限度地减少拉伸(或者完全没有)。我对裁剪的图像没意见,但如果可能的话,我希望它保持未拉伸。

Github 页面:https://tsukiyonocm.github.io/Portfolio-Photography-Website/
Github CSS:https://github.com/Tsukiyonocm/Portfolio-Photography-Website/blob/master/css/style.css

想法?

【问题讨论】:

    标签: css html


    【解决方案1】:

    以百分比表示的高度相对于父级起作用,沿树向上。

    也需要设置

    .slides {height:100%;}
    

    【讨论】:

      【解决方案2】:

      在您的 CSS 中使用“cover”和“vh”将其设置为背景图片。如果您有幻灯片的图片,请删除图片标签,然后将幻灯片 div 用作每张幻灯片和每张幻灯片副本的背景容器。

      .slide { 
         width:100vw;
         height:100vh;
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
      }
      
      .slide__1{
           background: url(images/bg.jpg) no-repeat center center; 
          }
      .slide__2{
               background: url(images/bg2.jpg) no-repeat center center; 
          }
      .slide__3{
               background: url(images/bg3.jpg) no-repeat center center; 
          }
      
      .slides{
          height:100vh;
          width:100vw;
      }
      
      <div class="slides">
          <div class="slide slide__1"><p>Some text</p></div>
          <div class="slide slide__2"><p>Some text</p></div>
          <div class="slide slide__3"><p>Some text</p></div>
      </div>
      

      它会自动缩放和裁剪以始终填满整个视口。

      【讨论】:

      • 为了澄清,单位vh是当前视图高度的百分之一。
      • 然后我会不会只使用 JS 来保持轮播运行?
      • 是的。只需使用您的脚本定位幻灯片 div 而不是图像标签。
      • 感谢所有回复!花了一些时间弄清楚如何使用我的旧代码重新编写东西,但我设法弄明白了,它似乎工作得很好!再次感谢!
      • 如果可以的话,请快速提问,对于较大的屏幕尺寸,推荐的解决方案是什么?通过上述设置,图像在 1600 像素(图像大小)处停止传播,这很好,但我应该将其背景颜色设置为黑色吗?导航栏颜色?只是好奇推荐的解决方案是什么。
      猜你喜欢
      • 2014-03-10
      • 1970-01-01
      • 1970-01-01
      • 2018-05-30
      • 2017-06-19
      • 1970-01-01
      • 2022-01-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多