picture 1 picture 2

There is a picture with a glow, which is located on a translucent background. To level indents, I frame most of them in Photoshop and reduce them in size due to trimming along the edges (height and width) - in this case, a semi-transparent frame appears around the image. The task is as follows: how to keep the original size of the picture, but at the same time remove empty oops from each side?

#main { min-height: 200px; min-width: 400px; height: 100%; display: inline-block; background-color: rgba(159, 105, 94, 0.7); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.25); } 
 <div id="main"> <img src="http://s019.radikal.ru/i632/1611/ad/2357375f029d.png" /> <img src="http://s09.radikal.ru/i182/1611/cc/fcaf7b157f62.png" /> </div>

  • picture because such ... - C.Raf.T

2 answers 2

You cut the glow and it turns out such a frame. Try using negative values ​​for the margin .

 #main { min-height: 200px; min-width: 400px; height: 100%; display: inline-block; background-color: rgba(159, 105, 94, 0.7); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.25); } .pic { margin-right: -30px; /* например: убираем отступ с права*/ } 
 <div id="main"> <img class="pic" src="http://s019.radikal.ru/i632/1611/ad/2357375f029d.png" /> <img src="http://s09.radikal.ru/i182/1611/cc/fcaf7b157f62.png" /> </div>

  • yes, negative margin decides, thanks - Vasya

 #main { min-height: 200px; min-width: 400px; height: 100%; display: inline-block; background-color: rgba(159, 105, 94, 0.7); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.25); } #pic2{ width:100px; height:130px; } 
 <div id="main"> <img src="http://s019.radikal.ru/i632/1611/ad/2357375f029d.png" /> <img id='pic2' src="http://s019.radikal.ru/i632/1611/ad/2357375f029d.png" /> </div>

UPD

 #main { min-height: 200px; min-width: 400px; height: 100%; display: inline-block; background-color: rgba(159, 105, 94, 0.7); box-shadow: 0 -20px 50px rgba(0, 0, 0, 0.25); } #pic2{ position:absolute; margin-top:30px; } 
 <div id="main"> <img src="http://s019.radikal.ru/i632/1611/ad/2357375f029d.png" /> <img id='pic2' src="http://s019.radikal.ru/i632/1611/ad/2357375f029d.png" /> </div>

  • Yes, the size can be set, but it has decreased. and I need to keep the size, but at the same time remove indents - I’ll add to the description - Vasya
  • @ Vasya, then you need to re-photoshop the picture, because your cropped on a translucent background, and therefore stands out 'cropping' ... - C.Raf.T
  • one
    @ Vasya can be different, look at 'UPD' - C.Raf.T
  • Yes, absolute positioning is a crutch that knocks a picture from the stream and imposes many restrictions in my case. below gave the most correct answer - use negative margin . What did you mean by "re-photoshop image"? - Vasya