skip to Main Content

Hi I have an issue with the page http://nroux.com
I build it with the DIVI theme from WordPress.

I want the pictures to be covering the full div next to the text no matter the size of the picture.
The picture shall not be deformed so it is kind of a:
min-width:100% and min-height:100% with the rest auto I guess but I tried several option that I found on stackoverflow but without success.enter image description here

Could someone help me?

Thanks

3

Answers


  1. .et_pb_image{
        height: 100%;
        width: 100%;
    }
    .et_pb_image img{
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    

    Try this on css. et_pb_image is the class name which image belongs to

    Login or Signup to reply.
  2. try something like this

    <img src="image.jpg" style="width: 100%; height: 100%; object-fit: cover;">
    Login or Signup to reply.
  3. You can try applying this css to your image container:

    .container {
       position: relative;
       height: 100%;
       width: 100%;
       overflow: hidden;
    }
    

    And this to the image:

    .container img {
       position: absolute;
       top: 0;
       left: 0;
       height: 100%;
       width: auto;
       max-width: initial;
    }
    

    The image might be more or less hidden, depending on the image and the text size thought.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search