Susy and responsive images - susy-compass

Question

i don't understand something with grid mixin.Actually i use this code, but only work on mobile, on desktop, the image container doesn't get the full size.
.vue-diapo-hp-img{
//#include set-container-width();
img{#include adaptable-img;}
#include at-breakpoint ($mobile){
#include set-container-width();
}
#include at-breakpoint ($desktop){
#include set-container-width();
//#include span-columns($desktop);
}
#include at-breakpoint ($tablet){
#include set-container-width();
}
}
The html code is (drupal views source):
<div class="vue-diapo-hp-img"> <img class="imagefield imagefield-field_diapo_home_pano" width="990" height="204" src="http://sandboxd6-1.vmsbx/sites/sandboxd6-1.vmsbx/files/diapo_home/site-date-yyyy/site-date-ww/gabarit-diapo-home-er.jpg?1383819992"> </div>
<div id="transparency"></div>
<div id="contenu-diapo">
<h2></h2></div>
what can i do to get both breakpoint works ? what is the difference between
#include set-container-width(); and #include span-columns($desktop); for example ?
you can see it in action : http://d6sbx1.pfdev.tk/
thanks
EDIT1: modified code after explaination
.vue-diapo-hp-img{
clear: both;
img{#include adaptable-img;}
#include at-breakpoint ($mobile){
#include set-container-width();
}
#include at-breakpoint ($desktop){
#include set-container-width();
//#include span-columns($desktop);
}
#include at-breakpoint ($tablet){
#include set-container-width();
}
}
this doesn't do responsive image on mobile but give full width on desktop.

Answer 1

set-container-width sets a width (or max-width) value based on the total-columns, plus grid-padding. span-columns sets the width of an item inside that container - often a relative width unless you have set your $container-style to static (which you haven't, in this case). span-columns also applies floats, and margins to align items on your grid. With a static grid and no grid-padding, they might return the same width, but they are built to calculate different objects, so they use different logic underneath.
But it looks to me like you already have a container in place, and you simply want to span the full width of that container - in which case you don't need either one. All block elements, including your image-wrapper, span full width by default. If you need to clear a float above, you can just clear: both to do that. And sine you want that at every breakpoint, there's no reason to use media-queries either:
.vue-diapo-hp-img{
clear: both;
}
That should be all you need. At most, you could add width: 100% if (for some reason) it's not spanning the full width.