2

I have a DIV of 100px height & width and I am trying to fit an image of 800x800 pixels. Initially, the image seems very small, if I increase the min-height and min-width to 200px, then it seems fine but the image location moves and from the DIV also, the DIV size is no longer 100px, the image size becomes larger. I did search before posting my question here, unfortunately, I couldn't get what I want. Thus, I am p[osting a question.

JSfiddle:

Live Demo

I have two containers, orig and stretch, I want the image to be in the center of the stretch DIV. However, the image moves from its position.

Note: It's not a duplicate question, because I want the image of stretch container of with & height of 200px and to be placed within the DIV container or in the center of stretch container. I couldn't get a solution to solve this.

nix
  • 165
  • 2
  • 4
  • 19
  • 2
    Use `.stretch img { height: 100%; width: 100%;}` – לבני מלכה Aug 19 '18 at 05:31
  • See here:http://jsfiddle.net/7L3wo5q1/18/ – לבני מלכה Aug 19 '18 at 05:44
  • This is not what I want to achieve, as I mentioned earlier. I want the image to occupy all of the `DIV`. as shown in my example [link](http://jsfiddle.net/7L3wo5q1/15/), the image size in `stretch` is what I want, but to be placed within the DIV container itself. – nix Aug 19 '18 at 08:47
  • so `use background-image` (the image is strech but because the background around the shape it look like no...) – לבני מלכה Aug 19 '18 at 08:52
  • Please check now [link](http://jsfiddle.net/7L3wo5q1/29/), I used `background-image` but this time even the `DIV` size increased, that's not what I want. I only want `height & width` of the image to be of `200px` but DIV of only `100px` height & width. Again, I need to stretch the image or I want to fit the image of larger size in the 100px DIV container. – nix Aug 19 '18 at 18:26

0 Answers0