相关疑难解决方法(0)

我的问题与这个问题非常相似:CSS:100%的宽度或高度,同时保持纵横比？

我有一个div,其位置是固定的.div 的宽度必须为100%,高度恰好是宽度的 1/6 .是否有-webkit-calc()这样做的方法？

注意: JS解决方案不是首选,因为缩放/方向更改会影响宽度/高度.

可以div在视口中放置一个正方形并使其居中,并始终根据宽度和高度保持其纵横比？

要求 :

• 只有CSS
• 无论视口的方向(横向或纵向)如何,方块的大小都必须适应视口的最小尺寸(宽度或高度).
• 正方形必须在视口中以水平方向和垂直方向居中

例:

我正在使用 CSS Grid 来布局缩略图库，没有使用 Javascript 或任何其他响应式技术。我想将缩略图的高度设置为其宽度 (1:1) 平方比。
为什么？当页面加载时，我需要缩略图 div 来占用空间，因为现在如果缩略图 div 中没有图像，它就不会占用任何空间。

这是一个实时示例：https : //www.w3schools.com/code/tryit.asp?filename=FMCULIDQUOBX

这是代码：

.container {max-width: 900px;}
.gallery {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-gap: 15px;
}
.thumbnail {box-shadow: 0 4px 4px rgba(0,0,0,0.50);}
img {width: 100%; display: block;}

……………………………………………………………………………………………………………………………………………………………………………………………………

<div class="container">
  <div class="gallery">

    <div class="thumbnail">
      <a href="large-image.jpg">
        <img src="thumbnail-image.jpg">
      </a>
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>
    <div class="thumbnail">
      ...... same as above ......
    </div>
    <div class="thumbnail">
      ...... same as above ...... …

我正在试图找出构建动画六边形菜单的最佳方法.请参阅下图以便更好地理解:

六角汉堡按钮位于中间.点击后,它会显示汉堡按钮周围的三角形形状.后者变成了一个十字架来扭转这个过程并将一切都隐藏起来.

我的照片实际上在一开始就缺少了一步.第一张图片应该只显示汉堡按钮,就像codepen演示一样.

所以我的问题如下:

你能否请我告诉我你将如何通过jQuery和其他方法将这个六边形菜单动画从HTML 构建到CSS.你会用什么技术来实现它.请记住,虽然codepen示例以简单的图标为特色,但我的特色是三角形图片,曾经悬停时会显示带有字幕的标题.

我想在冬季为我的网页创建一个雪花.

我尝试的第一件事是使用SVG创建它:

<h3>Koch Snowflake Frac</h3>
<svg viewBox="-5 -5 110 110" xmlns="http://www.w3.org/2000/svg">
  <polyline stroke="cornflowerblue" stroke-width="2" fill="rgba(255,255,255,0.5)" points="55 5, 
                    60 10, 
                    65 10, 
                    65 15,
                    70 20,
                    75 20,
                    80 15,
                    85 20,
                    90 20,
                    85 25,
                    90 30,
                    80 30,
                    75 35,
                    80 40,
                    90 40,
                    85 45,
                    90 50,
                    85 50,
                    80 55,
                    75 50,
                    70 50,
                    65 55,
                    65 60,
                    60 60,
                    55 65,
                    50 60,
                    45 60,
                    45 55,
                    40 50,
                    35 50,
                    30 55,
                    25 50,
                    20 …

我正在寻找一种纯CSS解决方案，以解决我在这里使用jQuery所提供的帮助。

基本上，我有3个div，它们在容器中的宽度均匀分布。它们保持3/4的比例，高度是根据宽度计算得出的。此外，每个div都有一个与背景成比例的背景图像以及一些水平和垂直居中的文本。

$(document).ready(function() {
  function setw() {
    var footdivwidth = $('footer div').width();
    var footdivheight = footdivwidth * .75;
    $('footer div').css({
      'height': footdivheight + 'px'
    });
    $('footer div span').html('w: ' + footdivwidth + '<br>h: ' + footdivheight);
  }
  setw();
  $(window).resize(function() {
    setw();
  })
});

FOOTER {
  max-width: 1000px;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0.171);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

FOOTER DIV {
  background-image: url('https://learnwebdesign.online/img/bg.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: …

这是我目前拥有的代码(它还没有工作):

HTML:

<div class="chi_display_header" style="background-image:url('http://localhost/.../header-dummy-small.png');"></div>

CSS:

.chi_display_header {
    background-size:contain;
    width:100%;
    min-height:100px;
    height:calc(1vw * 270 / 1280px);
    max-height:270px;
    max-width:1280px;
    margin:0 auto;
}

这是一个居中的响应式背景图像 - 容器应该有可变的宽度/高度,我不想使用jQuery.

已知属性:

比率:1280:270

最小高度:100px

最大高度:270px

最大宽度:1280px

我尝试做的是使用calc神奇地计算.chi_display_header的容器高度:

height = calc(CURRENT_SCREEN_WIDTH*270/1280);

但是我目前的方法

height:calc(1vw * 270 / 1280px);

不起作用.有CSS解决方案吗？

我正在尝试创建一个固定的宽高比框,调整大小以不溢出其父级.

经典的padding-bottom技巧只能根据父宽度定义高度,并且这里可测试允许元素在宽度增加时比父元素更高.不好.

然而,使用vh和vw,我们可以通过父视图是视口的尺寸的限制来实现我们想要的.可以在这里测试.

<style>
  div {
    max-width: 90vw;
    max-height: 90vh;
    height: 50.625vw; /* height defined in terms of parent width (90*9/16) */
    width: 160vh; /* width defined in terms of parent height, which is missing from the padding-bottom trick (90*16/9) */
    background: linear-gradient(to right, gray, black, gray);
  }
</style>

<div></div>

有没有办法让vh和vw等效引用父类而不是视口？或者是否有一个补充技巧来解决其问题？css比率属性在哪里？

此外,图像具有某种内在比例,但我不确定如何利用这一点.

我已经研究过Flexbox以实现响应式布局,如下图所示.不幸的是,我仍然没有想出如何实现如图1所示的桌面布局,在小于414像素的视口上将其自身重新排列为图2.

图1(桌面视口)

图2(移动视口)

(缩放版)

点击此处查看原始尺寸的图片

我的代码到目前为止:

.flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  flex-direction: row;
}
.content-flexbox.one {
  flex-basis: calc(66% - 1rem);
  order: 2;
}
.content-flexbox.two {
  flex-basis: calc(30% - 1rem);
  order: 1;
}
.content-flexbox.three {
  order: 3;
}
.content-flexbox.four {
  order: 4;
}
.content-flexbox {
  margin: 1rem;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
@media only screen and (max-width: 959px) {
  .flexbox {
    -flex-direction: column;
    padding-top: 1rem; …

关于维护元素的宽高比(使用flexbox或不使用),有很多问题.但是,我的问题略有不同,因为我想覆盖子图像元素的宽高比:

1. 确保图像object-fit: cover完全覆盖元素()
2. 确保元素为1:1(即完美的圆圈)
3. 确保隐藏溢出的图像

换句话说,图像必须表现得好像它是一个元素的背景(我不能用它们作为背景图像),其纵横比总是1:1 并且响应.

在下面的例子中,一切正常,除了<a>元素适应他们的图像后代.但我希望他们保持1:1的比例,这样我就能得到完美的圆圈.(不过,第一行的中间一行必须大于其余部分.)

HTML无法更改,但我可以使用现代CSS属性,如object-fit和flexbox.(只要最新版本的Chrome/Firefox支持它.)

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.img-gallery {
  background: #fafafa;
  padding: 24px;
  min-width: 320px;
  width: 90%;
  margin: 0 auto;
}

.img-gallery .row {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
}

.img-gallery a {
  display: block;
  text-decoration: none;
  background-image: linear-gradient(60deg, #004494 0%, #7db9e8 78%, #c2dfed 100%);
  overflow: hidden;
  border-radius: 50%;
  padding: 3px;
  flex: 1;
  margin: 0 24px;
  transition: padding 200ms; …