html - CSS Resize images to fit in a container -

-

i want fit images in container different images size :

example :

1. full size in container bigger size.

2. middle in container horizontal size.

3. middle in container vertical size.

check out example link

as gautam said, need use

max-height:100%; max-width: 100%;

so can define class containers

.container {     display:flex;     align-items:center;     justify-content:center;     border:1px solid black;     background-color: #ffffff;     width: 50px;     height: 50px; }

and class images

.maxsize {     max-height:100%;     max-width: 100%; }

the display:flex; property makes container easier config, can center contents faster. can remove border property, it's easier viewing of container edges. hope helps.

updated jsfiddle


Comments

Post a Comment

Popular posts from this blog

Google sheets equipment borrowing system -

-
i working on google sheets system shows has item. have never worked google apps script before, want check value of c2, make sheet copy of data (d2, e2, g2) here (it trying copy 2nd column) , move here (in different sheet same document) next corresponding name on each particular section i think want rotate data columns becomes rows, , rows become columns, right? what need [transpose][1] function. for example, in a2, if put =transpose('sheet 2'!c1:1) , google sheets automatically fill column values of first row of 'sheet 2', starting @ c1 position. updated answer: here working example here steps: get filtered list of timestamp matched equipment sort list it's reverse order get first item sorted list ("last date") get position of "last date" in timestamp list get item in action list @ same position "last date" if item "check out" it's not available. note: might want store result of index() ...
Read more

android - Why am I getting the message 'Youractivity.java is not an activity subclass or alias' -

-
Image
i created own android project , cut , pasted code exercise: http://androidexample.com/show_phone_contacts_in_autocomplete_suggestions_-_android_example%20/index.php?view=article_discription&aid=106&aaid=128# when build project no errors or warnings. when run project window error: annoyingly, can't make window smaller, can't click of buttons. cick 'x' @ top, close it. here's project structure: where getting 'autocompletemain' from? (note small c) class named autocompletemain. help. and have activity included in android manifest, in case you're wondering: <?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.androidexample.autocompleteedittext" android:versioncode="1" android:versionname="1.0" > <uses-permission android:name="android.permission.read_phone_state...
Read more

c# - Convert type 'System.Collections.Generic.List<string>' to 'System.Collections.Generic.IList<>' -

-
in model account have property this public list<string> roles { get; set; } later on want property convert ilist<iapplicationuserrole<role>> , have function public ilist<iapplicationuserrole<role>> roles { { return _account.roles; // how convert in specific type intended. } } here iapplicationuserrole public interface iapplicationuserrole<trolemodel> : irole<string> trolemodel : entitymodel { trolemodel role { get; set; } string name { get; set; } } i newbie thing. looking forward help. say have implementing class like: public class applicationuserrole : iapplicationuserrole<t> t : role { public applicationuserrole() { } public user user { get; set; } public t role { get; set; } } then, you'd this: public ilist<iapplicationuserrole<role>> roles { { return _account.roles .select(r => ...
Read more