是否可以仅使用 CSS 将宽度和高度相等的孩子刻录，但不超过其父级? [英] It's possible to inscribed a child with equal width and height, not exceeding it's parent, using only CSS?

查看：23
本文介绍了是否可以仅使用 CSS 将宽度和高度相等的孩子刻录，但不超过其父级?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我的想法是让子对象(@example the.moon")具有相等的高度和宽度值，并且不超过父对象的宽度或高度(@example.sun";).

所以当父级宽度大于其高度时，子级宽度和高度的值取较小的值，即父级高度.

同理，当父高度大于其宽度时，子节点的宽度和高度值取较小的值，即父宽度.

我的意思是在容器内写入一个对象，但只使用 CSS.

padding-top"技巧仅在父宽度大于其高度时有效.和对象适合"我猜只适用于图像.

我确实引用了圆圈，只是为了清楚说明边必须具有相同的值(高度和宽度)，并且子元素可以包含元素.

我知道使用 JavaScript 可以完美地获取父高度和宽度，比较较小的高度和宽度并将其设置为子高度和宽度，我使用 jQuery 制作它，但想知道是否可以在没有 jQuery 的情况下实现它或 JavaScript，纯 CSS.

试试这个例子并调整屏幕大小.

var pw = "";var ph = "";var cw = "";var ch = "";$( 窗口 ).resize(function() {pw = $('.sun').width();ph = $('.sun').height();cw = $('.moon').width();ch = $('.moon').height();如果(pw > ph){$('.moon').css({'宽度': ph + 'px','高度':ph + 'px'});}别的 {$('.moon').css({'宽度': 密码 + '像素','高度':pw + 'px'});}});函数 mySUNction() {pw = $('.sun').width();ph = $('.sun').height();cw = $('.moon').width();ch = $('.moon').height();如果(pw > ph){$('.moon').css({'宽度': ph + 'px','高度':ph + 'px'});}别的 {$('.moon').css({'宽度': 密码 + '像素','高度':pw + 'px'});}}

* {填充:0；保证金:0;}.sky {位置:绝对；宽度:100%；高度:100%；背景:紫色；显示:弹性；对齐内容:居中；对齐项目:居中；}.太阳 {位置:相对；宽度:33%；/*填充顶部:33%；*/高度:33%；背景:黄色；显示:弹性；对齐内容:居中；对齐项目:居中；}.月亮 {背景:蓝色；/*对象适合:填充；*//*边界半径:50%；*/}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script><div class="天空"><div class="sun"><div class="moon"></div>

<div><button onclick="mySUNction()">点击我</button>

解决方案

如果只想要视觉效果，可以用渐变来实现:

body {保证金:0;}.sky {高度:100vh；背景:紫色；显示:弹性；对齐内容:居中；对齐项目:居中；}.太阳 {位置:相对；宽度:33%；高度:33%；背景:径向渐变(圆形最近侧，蓝色 99%，透明 100%)黄色;}

<div class="sun">

使用蒙版应用的相同逻辑，您可以使用任何背景:

body {保证金:0;}.sky {高度:100vh；背景:紫色；显示:弹性；对齐内容:居中；对齐项目:居中；}.太阳 {位置:相对；宽度:33%；高度:33%；背景:黄色;}.sun >div {宽度:100%；高度:100%；背景:网址(https://picsum.photos/id/1074/800/800)中心/包含；-webkit-mask:radial-gradient(圆圈最近侧，蓝色99%，透明100%)；面具:径向渐变(圆形最近侧，蓝色99％，透明100％)；}

<div class="sun"><div></div>

你也可以考虑使用 min()/max() 如下

body {保证金:0;}.sky {高度:100vh；背景:紫色；显示:弹性；对齐内容:居中；对齐项目:居中；}.太阳 {位置:相对；宽度:33vw；高度:33vh；背景:黄色；显示:弹性；}.sun >div {保证金:自动；高度:分钟(100％，33vw)；宽度:分钟(100％，33vh)；背景:网址(https://picsum.photos/id/1074/800/800)中心/包含；}

<div class="sun"><div></div>

也像下面这样:

body {保证金:0;}.sky {高度:100vh；背景:紫色；显示:弹性；对齐内容:居中；对齐项目:居中；}.太阳 {位置:相对；宽度:33vw；高度:33vh；背景:黄色；显示:弹性；}.sun >div {保证金:自动；显示:弹性；宽度:分钟(100％，33vh)；背景:网址(https://picsum.photos/id/1074/800/800)中心/包含；}.sun >div::before {内容:"";填充顶部:100%；}

<div class="sun"><div></div>

如果你想要外接圆的相关问题:围绕可变高度的 div 做一个完美的圆

My idea is to get the child object (@example the ".moon") to have the equal values of height and width, and not exceed the width or the height of the parent (@example the ".sun").

So when the parent width is bigger than its height, the child's value for width and height is the smaller one, the parent height.

In the same way when the parent height is bigger than its width, the child's value for width and height is the smaller one, the parent width.

I mean inscribe an object inside the container but only using CSS.

The "padding-top" trick only works when the parent width is bigger than its height. And the "object-fit" only work for images I guess.

I did reference the circles, just to make it clear that the sides have to have the same value (height and width), also that the child can contain elements.

I know it can be perfectly done with JavaScript getting the parent height and width, comparing the smaller one and set it to the child height and width, I made it with jQuery, but wanna know if its possible to achieve it without jQuery or JavaScript, pure CSS.

Try the example and resizing the screen.

var pw = ""; var ph = ""; var cw = ""; var ch = "";

$( window ).resize(function() { 
  
pw = $('.sun').width();
ph = $('.sun').height();
cw = $('.moon').width();
ch = $('.moon').height();
  if(pw > ph){
  $('.moon').css({
      'width': ph + 'px',
      'height': ph + 'px'
  });
  }
  else {
  $('.moon').css({
      'width': pw + 'px',
      'height': pw + 'px'
  });
  }
});

function mySUNction() {
   
pw = $('.sun').width();
ph = $('.sun').height();
cw = $('.moon').width();
ch = $('.moon').height();
  if(pw > ph){
  $('.moon').css({
      'width': ph + 'px',
      'height': ph + 'px'
  });
  }
  else {
  $('.moon').css({
      'width': pw + 'px',
      'height': pw + 'px'
  });
  }
}

* {
  padding: 0;
  margin:0;
}
.sky {
  position: absolute;
  width: 100%;
  height: 100%;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sun {
  position: relative;
  width: 33%;
  /*padding-top: 33%;*/
  height: 33%;
  background: yellow;  
  display: flex;
  justify-content: center;
  align-items: center;
}
.moon {
  background: blue;  
  /*object-fit: fill;*/
  /*border-radius: 50%;*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div class="sky">
<div class="sun">
<div class="moon"></div>
</div>
<div>
<button onclick="mySUNction()">Click me</button>

解决方案

If you only want the visual, it can be done with gradient:

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33%;
  height: 33%;
  background: 
   radial-gradient(circle closest-side,blue 99%,transparent 100%)
   yellow;
}

<div class="sky">
  <div class="sun">
  </div>
</div>

The same logic you apply with a mask and you can use any background:

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33%;
  height: 33%;
  background: 
   yellow;
}

.sun > div {
  width:100%;
  height:100%;
  background:url(https://picsum.photos/id/1074/800/800) center/contain;
  -webkit-mask:radial-gradient(circle closest-side,blue 99%,transparent 100%);
          mask:radial-gradient(circle closest-side,blue 99%,transparent 100%);
}

<div class="sky">
  <div class="sun">
    <div></div>
  </div>
</div>

You can also consider the use of min()/max() like below

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33vw;
  height: 33vh;
  background: yellow;
  display: flex;
}

.sun > div {
  margin:auto;
  height:min(100%,33vw);
  width:min(100%,33vh);
  background:url(https://picsum.photos/id/1074/800/800) center/contain;
}

<div class="sky">
  <div class="sun">
    <div></div>
  </div>
</div>

Also like below:

body {
  margin:0;
}
.sky {
  height: 100vh;
  background: purple;
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  position: relative;
  width: 33vw;
  height: 33vh;
  background: yellow;
  display: flex;
}

.sun > div {
  margin:auto;
  display: flex;
  width:min(100%,33vh);
  background:url(https://picsum.photos/id/1074/800/800) center/contain;
}
.sun > div::before {
  content:"";
  padding-top:100%;
}

<div class="sky">
  <div class="sun">
    <div></div>
  </div>
</div>

Related question if you want the circumscribed circle: Make a perfect circle around a div of variable height

这篇关于是否可以仅使用 CSS 将宽度和高度相等的孩子刻录，但不超过其父级?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆