Magento 2.0.1 – How to Resize Individual Image in Widget

After some testing I have found the issue. The div section with a class of columns is set to display:flex on screen sizes 767px or below. This display setting is causing the viewpoint to expand to the maximum size. As the Owl Carousel is large in length, the viewpoint expands to accommodate this.

Obviously a display setting of flex is better for smaller views, so to overcome this issue, setting overflow to hidden, scroll or auto on the div.column.main has fixed the issue.

I'm not 100% sure if this will have any repercussions later on, but for now this has fixed the issue and may help anyone else with the same problem.

try:

define image size in app\design\frontend\MyPackage\mytheme\etc\view.xml as

<image id="my_widget_image_size" type="small_image">
    <width>240</width>
    <height>360</height>
</image>

then your function:

public function getPImage()
    {
     $col=$this->getCollection();
     $image = 'my_widget_image_size';
     foreach ($col as $product)
     {
        $productImage = $block->getImage($product, $image);
        echo $productImage ->toHtml();
     }  
    }

This will give you the entire image HTML. So don't put this inside img src.

Update: Get image url:

If above method did not work for you try this one.

public function getPImage()
        {
         $col=$this->getCollection();
         $image = 'my_widget_image_size';
         foreach ($col as $product)
         {
            $productImage = $block->getImage($product, $image);
            $_imagehelper = $this->helper('Magento\Catalog\Helper\Image');
            $productImage = $_imagehelper->init($product, $image)->constrainOnly(FALSE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(400)->getUrl();
            echo $productImage;
         }  
        }