How to make an image fit to div size by background-image: url ('') using javascript or css.

Navigation
0

I have a div that has size 200x300 and one that has 50x100, the 2 div will receive background-image: url('') that the user informs, however he can put an image with size 1280x720, soon, the image will appear a little bit in div , how could I resize it to fit in the div? In the case, in one place have the size 200x300 and elsewhere have the size of 50x100 using only javascript or css?

    
asked by anonymous 19.02.2018 / 14:10

2 answers

1

This would be the easiest way 

.place {
	width: 300px;
	height: 200px;
	background-image: url('http://lounge.obviousmag.org/tanto_mar/assets_c/2015/07/Blue-Water-thumb-920x575-115076.jpg');
	background-position: center;
	background-size: cover;
}
<div class="place"></div>

Using npm, have this package here: link

    
19.02.2018 / 14:16
0

You can use the "cover" property of css, do the following, remember that it is not very advisable to use a very large image for something small 

<div class="image" ></div>

.image{
background-image: url("seila.png");
background-size:cover;
}

Follow the codepen link

    
19.02.2018 / 14:15
Assign method to custom types in Golang How to generate event from marking or clearing checkbox with jquery / javascript