Product image not zooming in properly when hovering on image at product detail page

Question

In my product page detail when i try to hover the product image there's only white box with low opacity overlaying at the top of my image like this :

Usually in Magento 2, when hovering the image it will zoom in the part where the image is hovered like this:

I've tried to edit view.xml in my app/design/frontend/theme, but i can't get it to work, here's the code:

<var name="magnifier">
            <var name="fullscreenzoom">5</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top"></var> <!-- Top position of magnifier -->
            <var name="left"></var> <!-- Left position of magnifier -->
            <var name="width"></var> <!-- Width of magnifier block -->
            <var name="height"></var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

Answer 1

Change below var :

<var name="width">1200</var> <!-- Width of magnifier block -->
<var name="height">1200</var> <!-- Height of magnifier block -->

Answer 2

Finally, I get the solution, please change code as given below this code working for me.

<var name="magnifier">
            <var name="fullscreenzoom">20</var>  <!-- Zoom for fullscreen (integer)-->
            <var name="top">0</var> <!-- Top position of magnifier -->
            <var name="left">100%</var> <!-- Left position of magnifier -->
            <var name="width">250</var> <!-- Width of magnifier block -->
            <var name="height">250</var> <!-- Height of magnifier block -->
            <var name="eventType">hover</var> <!-- Action that atcivates zoom (hover/click) -->
            <var name="enabled">true</var> <!-- Turn on/off magnifier (true/false) -->
        </var>

Answer 3

It was a CSS issue for mine. Please add this line to any CSS file.

.magnifier-preview img { max-height:inherit; }