Option 1

Question

<强 > 全球问题:

我想根据父体高度设定元素的宽度, 我知道您可以使用 < code>paded- top 来根据父体宽度设定高度, 也许有人会为我的案件设计。

一种可能的解决办法(trick)是“强”至“强”至“强”至“强”至“全局问题leight: 100/code>至“元素,”至“code>rotate(90deg),以模拟其宽度等于母体高度,但不符合我的情况。

" 强 " 具体问题

简化问题:

我想要一个具有宽度和高度 = x 的动态平方元素, x = 母高度。

""https://i.sstatic.net/ofwe6.png" alt="此处输入图像描述"/"

全部问题:

我想要这样的东西

""https://i.sstatic.net/jvpwg.jpg" alt="在这里输入图像描述"/ >

x = d / sqrt(2) (毕达哥里定理)

当你可以看到“d”是母体的高度时,我试试看

.blue{
    background: #1AA9C8;
    width: 200px;
    height: 100px;
    position: relative;
    margin: 25px auto;
}

.blue:before{
    content:   ;
    position: absolute;
    right: calc(100% - 36px);
    top: 15px;
    background: firebrick;    
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    height: calc(100% / 1.41);/*this worked because height depends on the parent s height (div.blue)*/
    width: 70.9px; /* calc(100% / 1.41) here is my problem  because width depends on the parent s width and I don t know how to make it depends on the parent s height
}

<div class="blue"></div>

请注意,我设置了一个固定的 width ,因为我不知道如何让它取决于 hile 的 div.bluue

如果有人能帮助我,我将不胜感激。

< 坚固 > CSS < /坚固 >

Answer 1

解决您具体但并非全部的问题:

我想要一个具有宽度和高度 = x 的动态平方元素, x = 母高度。

动态方形可以是图像,父方可以是 div 。

<div class="parent-container">
    <img class="image" src="{{imageUrl}}" />
</div>

在此设置中, 您给父/ 母设定一个理想的高度, 并告诉元素( 图像) 全部取走。例如 :

.parent-container {
    height: 400px;   
}

.image {
    height: 100%;
}

这样的话,宽度与你无关

Edit

将 CSS 修改为此 :

.parent-container {
    height: 400px;
    overflow: hidden;
}

.image {
    height: 70.92%;
    position: relative;
    transform: translate(-50%, 0)rotate(-45deg);
    top: 14.4%;
}

应该解决"大问题"

请记住,身高和最高值是粗略的计算,应该重新使用。

小提琴起步:https://jsfiddle.net/0pok1bf0/

Answer 2

Just for kicks and giggles, here is an interesting attempt that makes use of vertical percentages (padding), as explained here: http://www.impressivewebs.com/vertical-percentages-css/

.d1 {
	margin-left: 50px;
	width: 50%;
	background-color: #CCCCFF;
	border: solid black 1px;
}

.d2 {
	width: 25%;
	background-color: #FF6666;
	border: solid black 1px;
	padding-top: 25%;
	margin: 5%;
	margin-left: -13%;
	transform: rotateZ(45deg);
}

<div class="d1">
	<div class="d2"></div>
</div>

查看整页模式并调整大小... 一切大小都很好,几乎是:P

Answer 3

您可以用假元素尝试此选项。然而, 如果不是高/ 宽, 您仍然需要设置边宽。

电子邮件:http://jsfiddle.net/lotusgodkk/GCu2D/752/" rel="no follow">http://jsfiddle.net/lotusgodkk/GCu2D/752/

CSS :

.box {
    position:relative;
    background-color:#7092BE;
    width:500px;/*sample*/
    height:150px;/*sample*/
    margin:0 auto;
}
.box:before {
    position: absolute;
    content:"";
    right: 100%;
    border-style: solid;
    border-color: transparent #880015 transparent transparent;
    top: 0;
    bottom: 0;
    border-width:75px;
}
.box:after {
    position: absolute;
    content:"";
    left: 0;
    border-style: solid;
    border-color: transparent transparent transparent #880015;
    top: 0;
    bottom: 0;
    border-width:75px;
}

HTML :

<div class="box"></div>

Answer 4

I ve come up with two practical implementations for your problem. One option requires one additional wrapper. The other requires two.

两个选项都允许您配置高度和宽度, 尽管方式不同。

就具体用途而言,备选方案1是最佳办法。

Option 1

此选项只需要增加一个包页 < code> div 。您定义矩形 < code> h8 的值, 以及 < code> width - high 的值( 定义为斜体) 。方形的宽度和高度会自动调整。

The Fiddle :

http://jsfidd.net/w9wgb72e/9/" rel="notfollow" >http://jsfidd.net/w9wgb72e/9/

The code :

.bluecontainer {
    width: 100px; /* set height of rectangle */
    margin: 8px auto;
    padding-right: 100px; /* this value equals height - width of the rectangle */
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100%;
    margin-left: -49.6%;
    position: relative;
    padding-bottom: 100%;
}

.ratiocontainer:before {
    content:   ;
    background: firebrick;
    padding: 35.4%;
    margin: 14.5%;
    float: left;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="bluecontainer">
    <div class="ratiocontainer">
    </div>
</div>

Option 2

此选项需要另外两个包装包件 < code> div 。您定义了您方形 < code> hile 和 < code> width 的值, 以及矩形的 < code> > width 的值。矩形的高度会自动调整, 以便矩形绕开方形。

The Fiddle :

http://jsfidd.net/w9wgb72e/10/" rel="notfollow" >http://jsfidd.net/w9wgb72e/10//a/strong

The code :

.bluecontainer {
    width: 200px; /* set width of rectangle */
    margin: 8px auto;
    background: #1AA9C8;
}

.ratiocontainer {
    width: 100px; /* set width & height of red square */
}

.stretchy-square {
    width: 100%;
    padding-bottom: 100%;
    position: relative;
    margin-left: -50%;
}

.stretchy-square:before {
    content:   ;
    background: firebrick;
    margin: 15%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

<div class="bluecontainer">
    <div class="ratiocontainer">
        <div class="stretchy-square"></div>
    </div>
</div>

Answer 5

虽然我知道这个问题很古老,但如果将来有人读到这个答案,但目前有办法用aspect-ratio 来做到这一点:

.blue {
  position: relative;
  width: 200px;
  height: 100px;
  background-color: #1AA9C8;
  margin: 25px auto;
}

.blue::before {
  content:   ;
  position: absolute;
  left: 0%;
  top: 50%;
  height: calc(100% / 1.41);
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) rotate(45deg);
  background-color: firebrick;
}

<div class="blue"></div>

aspect-ratio 指定了 hireight 和 width 之间的固定宽度比。在此情况下,如果有 1/ 1 的 aspect-ratio ,则默认设置为 auto 的 < width ,则现在将具有与 h8 相同的测量标准。

Edit

Option 1

The Fiddle :

The code :

Option 2

The Fiddle :

The code :

友情链接