css - Keeping aspect ratio of image but cropping when hitting max/min height -


i'm trying make image responsive resize , keep aspect ratio @ sizes. above 650px, height won't increase crop top , bottom keep ratio , not stretch. want image height won't go below 200px , left , right. want image center too. here have far: https://jsfiddle.net/4q83mh41/

<div class="hero"> <img src="http://wpdevserver.x10host.com/wp-content/themes/wp/img/hero1.jpg"> </div>   .hero {     width: 100%;     min-height:200px;     max-height: 650px;     position: relative; } .hero img {     width: 100%;     height:auto;     min-height:200px;     overflow: hidden;     max-height: 650px;     position:aboslute; }

many thanks

by adding javascript, position of image can adjusted dynamically inside .hero div. additionally, css media queries can used keep width of image correct.

.hero {   width: 100%;   overflow: hidden;   max-height: 650px; }  .hero img {   position: relative;   height: 200px;   width: auto; }  @media (min-width:420px) {   .hero img {     width: 100%;     height: auto;   } }

the javascript listens resize events , adjusts top , right properties of relatively positioned image keep centered. note i'm using jquery manipulate properties.

var heroresize = function() {   var aspect = 1800./858,       maxheight = 650,       minheight = 200,       width = $(".hero").width();   if(width < minheight*aspect) {     $(".hero img").css("right",(minheight*aspect - width)/2 + "px");   } else {     $(".hero img").css("right","0px");   }    if(width > maxheight*aspect) {     $(".hero img").css("top",(maxheight - width/aspect)/2 + "px");   } else {     $(".hero img").css("top","0px");   } } $(function(){   heroresize();   // remove if don't need dynamic resizing   $(".hero").on("resize",heroresize); });

the javascript may cause lag/stutter because resize events can performance-intensive. if don't need worry dynamic resizes, can remove indicated line.

i created codepen can play here: http://codepen.io/regdoug/pen/azxvwd note codepen has max height of 350px because allows see effect without resizing.


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more