Изображение залезло на border

188

07 марта 2022, 04:00

Всем привет имею изображение. Сделал его ширину и высоту в процентах,

max-width: 100%;

чтобы при уменьшении, оно уменьшалось. Проблема в том, что она находится в блоке, где есть border и следовательно, она есть и вокруг картинки. Как можно сделать, чтобы оно залезло на border. Если задать фиксированную высоту и ширину, то оно залезит на border, но тогда при уменьшении не будет уменьшаться.

Answer 1

через width:calc(100% + 2px); margin: 0 1px;

Answer 2

img { 
  width: 100%; 
} 
 
.border, 
.no__border { 
  display: block; 
  overflow: visible; 
  margin: 10px; 
  width: 200px; 
  height: 200px; 
  border: 4px solid red; 
} 
 
.no__border img { 
  width: calc(100% + 8px); 
  margin-top: -4px; 
  margin-left: -4px; 
  opacity: 0.8; 
}

Было 
<div class="border"><img src="https://pbs.twimg.com/profile_images/421748346907152384/RBkX2wzZ_400x400.jpeg"></div> 
Стало 
<div class="no__border"><img src="https://pbs.twimg.com/profile_images/421748346907152384/RBkX2wzZ_400x400.jpeg"></div>