'Umbraco v9 Bootstrap responsive image not working

After facing some issues working with Umbraco V9 with Bootstrap3 and the default StarterKit theme the images don't show responsive for some screen sizes.

Here some possible solution how to solve this particular issue:

1.Check the following attached image below and looks the standard Bootstrap4 without a responsive class.

[![enter image description here][1]][1]

  1. Got to your Umbraco project solution find the file (wwwroot\css\umbraco-starterkit-style.css) and create the following rule and save the file:

     .responsive {
     width: 100%;
     height: auto;
 }

  2. Find the file "\Views\Partials\grid\editors\media.cshtml" and around the line #57 add the following code: class="responsive".

    enter image description here

  3. Now we have solved all the images with responsive format for the whole website and the result of this issue solved.

    enter image description here

I hope this help and save a lot of time using Umbraco responsive images setup!

Have fun!

c++sharpcssasp.net-mvcumbracoresponsive-images


Solution 1:[1]

img.responsive  {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover; /* or contain; */
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 hardba11

Related Questions