image at 100% not cover all header if I resize like a small screen

[cla63]

Default like the uno.jpg. Solved if I delete the img inside the item div and setting the $image_src a background of the item div (due.jpg) < div class="item < ?php echo $key == 0 ? 'active' : ''; ? >" id="< ?php echo $image['post_id']; ? >" style="background: url('< ?php echo $image_src; ? >') no-repeat center center ;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;" >

there is a way to extend the plugin like this? if full width 100% so use the $image_src like div item background and remove the image inside else the normal funcionality..

default:

background:

[ewels]

Hi @cla63,

Is there a reason that this needs to be done using background images instead of straight CSS? This is discussed elsehwere, for example here: http://stackoverflow.com/questions/16466240/adjusting-and-image-size-to-fit-a-div-bootstrap

I would guess that the following should work (untested):

.item img {
     width:auto;
     max-width:none;
     height:100%;
}

Let me know if not - a JSFiddle example would be appreciated.

Phil

[cla63]

Hi Ewels,

like this you set the height and width of the images at the original size, and you can set the size of the images only for one resolution of the monitor.. this is not really responsive,

for that i prefere use the css3 cover attribute but work only on the background images

my code is here http://jsfiddle.net/zTWG5/

[ewels]

Ah ok, yeah I see the problem. Ok, I'll mark this as an opt-in feature in the shortcode attributes / settings page for a future release. No guarantees as to when I'll have time to write it in though sorry.

Phil

[rebecca-cook]

Hey cla63! Thank you for doing all the heavy lifting here! I think though, that the code is more functional if you call $image['url'] instead of $image_src for the background image like so:

<div class="item <?php echo $key == 0 ? 'active' : ''; ?>"
id="<?php echo $image['post_id']; ?>"
style="background: url('<?php echo $image['url']; ?>') no-repeat center center ;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;" >

[ewels]

Hi @cla63 and @cookierebes,

Thanks both for your interest in this! If either of you have written this up and got it working, it would be brilliant if you could fork the repository and then submit a pull-request.. This saves me from having to piece your suggestions together and re-write the code myself (the main reason that I haven't got around to releasing this feature yet). Failing that, I will get around to writing it up some day :)