html5 - Fill div with cropped image, preserve aspect ratio -


i have divs on page containing imgs. on image-click, opened in lightbox, inside div, should fill div completely, preserve aspect ratio.

this achieved far, problem aspect ratio not preserved when image in portrait-mode.

http://jsfiddle.net/btvet/1/

so need css-method center images vertically , horizontally while filling wrapping div (and of course cropping overflowing parts of image).

is possible, css only, or js required? browser-compatibility ie8 , higer , modern browsers.

solved js/jquery:

function resizeimages(){     $("#container img").each(function() {         var thisheight = $(this).height();         var thiswidth = $(this).width();         var containerwidth = $(this).parent().width();         var containerheight = $(this).parent().height();         var diff = 0;         if(thisheight > thiswidth){             //portrait             $(this).css("width","100%");             thisheight = $(this).height();             diff = thisheight - containerheight;             $(this).css("margin-top",-(diff/2));         }         else if(thiswidth > thisheight){             //landscape             $(this).css("height","100%");             var thiswidth = $(this).width();             if(thiswidth < containerwidth){                 $(this).css("width", containerwidth);                 thiswidth = containerwidth;             }             diff = thiswidth - containerwidth;             $(this).css("margin-left",-(diff/2));         }         $(this).css("opacity",1);     }); }

the set-opacity 1 @ end because want show images when finished resizing, set them opacity:0 in css , after resizing show them.

this works me in container widths , image modes.

this require javascript implementation. jquery, can check if height larger width , vice versa.

you can this:

$(".container img").each(function(){ var thiswidth = $(this).width(); var thisheight = $(this).height();  if(thiswidth > thisheight) {     $(this).css("width", "auto");     $(this).css("height", "100%"); } else if(thisheight > thiswidth) {      $(this).css("width", "100%");      $(this).css("height", "auto"); }  });

hope helps.


Comments

Post a Comment

Popular posts from this blog

linux - xterm copying to CLIPBOARD using copy-selection causes automatic updating of CLIPBOARD upon mouse selection -

i've tried various ways coerce xterm (versions 285 , 292) copy selection clipboard clipboard whenever press ctrl-shift-c. promising way far has been, in ~/.xresources, put this: xterm*vt100.translations: #override \ ctrl shift <keypress> c: copy-selection(clipboard) \n\ ctrl shift <keypress> v: insert-selection(clipboard) ctrl-shift-v works perfectly, copying has nuance... if restart xterm, highlighting text puts things in primary clipboard; expected, proper, default behavior. if hit ctrl-shift-c, copies current selection clipboard clipboard. the bug, however, if highlight text after first time pressed ctrl-shift-c, you'll see highlighting copies both primary and clipboard. cannot figure out how stop xterm updating clipboard upon selection... , doesn't make sense me in first place. i said, @ specific point in time, copy selection clipboard... yet starts updating automatically upon selection after doing once... anyone have workaround...
Read more

qt - Errors in generated MOC files for QT5 from cmake -

i generated moc files qt5 using set (cmake_automoc on) set(cmake_include_current_dir on) then add moc files src using set(src src/main.cpp src/video_widget_surface.cpp src/video_widget.cpp src/video_player.cpp #moc files moc/moc_video_player.cpp moc/moc_video_widget.cpp moc/moc_video_widget_surface.cpp finally add executable using add_executable(somegui ${src}) but errors in moc files saying : /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:54:6: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:62:19: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:68:20: error: 'videowidget' has not been declared /other/workspace/perception/somestuff/moc/moc_video_widget.cpp:68:46: error: non-member function 'const qmetaobject* metaobject()' cannot have cv-qualifier /other/qt5.0.1/5.0.1/gcc_64/include/qtcore/qo...
Read more