Как сделать эти квадраты отзывчивыми на родительский элемент?

   <svg style="width: 100px; height: 100px;" id="square">
    	<g>
    		<rect height="50" width="50" y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="50" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="0" x="50" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect height="50" width="50" y="50" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>
0
Jon Sud 1 Май 2019 в 16:52

2 ответа

Вы можете добиться того же, используя CSS и фон, тогда размер будет легко изменить:

.box {
  width:100px;
  height:100px;
  display:inline-block;
  background:
    linear-gradient(gray,gray),
    linear-gradient(gray,gray),
    #B0b0b0;
  background-size:100% 2px,2px 100%;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid gray;
}
<div class="box">

</div>
<div class="box" style="width:200px;height:200px;">

</div>

С SVG вы можете рассмотреть процентное значение:

rect {
  width: 50%;
  height: 50%;
}
<svg style="width: 100px; height: 100px;" id="square">
    	<g>
    		<rect  y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="50%" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="0" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect y="50%" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>

<svg style="width: 200px; height: 200px;" id="square">
    	<g>
    		<rect  y="0" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="50%" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect  y="0" x="50%" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    		<rect y="50%" x="0" stroke-width="2" stroke="gray" fill="#B0b0b0"/>
    	</g>
    </svg>
0
Temani Afif 1 Май 2019 в 14:00

Если вам нравится создавать адаптивный элемент, есть очень хороший трюк. Вы можете адаптировать его к любому желаемому соотношению, используя padding-top:100%;, вы получите соотношение 1: 1.

.ratio{
  width: 50%;
  position: relative;
  border: 2px solid #ff0000;
}
.ratio:before{
  content: '\0020';
  display: block;
  padding-top: 100%;
}
.box{
    border: 1px solid green;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
 }
<div class="ratio">
  <div class="box"></div>
</div>
-2
Gacci 1 Май 2019 в 14:05