html - resize images using % in css -



html - resize images using % in css -

i trying create liquid web layout using % many things can. have nail bump when resizing images.

both:

<img src="source" style="width: 20%; height: 20%;"/>

and

.wall_picture_block img{ width: 20%; height: 20%; }

don't work height attribte. resize image width 20% of container height stays relative image size.(im trying create squares)

the percentages in height , width attributes of image works container contained in. accomplish fluid effect trying putting in container around img , give image height , width: 100%. , should changing height , width of container in percentages. here's example

<div style="width: 500px; height: 100px;"> <img src="your-image-link-here" style="height: 100%; width: 100%;"> </div>

with image accomplish height , width of 500 * 100.

update

<div id="wrapper" style="border: 1px solid red; width: 900px; height: 400px;"> <div id="imgcontainer" style="width: 100%; height: 50%;"> <img src="ur-img" style="height: 100%; width: 100%;"> </div> </div>

example wrapper , container percentages.

html css image resize

Comments

Popular posts from this blog

Using Android Volley to post an array to PHP -

python - How to add an model instance to a django queryset? -

angularjs - No 'Access-Control-Allow-Origin' error from local domain to public API -