noone432423 noone432423 - 1 month ago 6
CSS Question

Giving proper width issue

I am trying to reduce the width and height of my image for small devices but without any success... Why am I loosing half of the image when I try to change the width for ex. ? Lets say I want to make it 50x100 or 70x60, how I can keep the whole image structure but without slicing it?
Here is example of my code



.logo { width: 100px; height: 100px; margin: 39px 0 0 3px; }
.logo a { display: block; height: 100%; background: url(https://i.downloadatoz.com/download/icon2/e/9/1/58ad7b4d1acbb54cd382e152b3a6619e.jpg) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%; }

<div class="logo">
<a href="#">Book Store</a>
</div>




Answer

Try this code.. Instead of specifying width and height, use background-size attribute.

.logo { width: 100px; height: 100px; margin: 39px 0 0 3px; }
.logo a { display: block; height: 100%; background: url(https://i.downloadatoz.com/download/icon2/e/9/1/58ad7b4d1acbb54cd382e152b3a6619e.jpg) no-repeat 0 0; font-size: 0; line-height: 0; font-style: normal; overflow: hidden; text-indent: -100%;
background-size:50px 50px;}
<div class="logo">
  <a href="#">Book Store</a>
</div>

Comments