0

I want to adjust this image width and height according to screen width and fix height of 200 px

enter image description here

want to show images like below image without clipping and stretching.

want to show in this manner

enter image description here

don't know how I can get this, wasted 2 days in searching...

    ScaleAspectFit with ClipsToBounds = true
Baljinder Kamboj
  • 67
  • 1
  • 10
  • I am not sure what you mean by "without clipping and stretching". You have to make a choice between clipping, stretching or scaling. If you want your image to not be stretched (which I guess is the case) you can either aspect fit or aspect fill. Aspect fit will resize the image, so it probably won't look good, aspect fill will clip your image, but will fill your `UIImageView` frame. So I suggest `imageView.contentMode = .scaleAspectFill` – Au Ris Oct 19 '18 at 09:29
  • You should show us what you have tried. Did you modify `UIView.ContentMode`? – Andreas Oetjen Oct 19 '18 at 09:30
  • Set the imageView width to match that of the view and the height of the imageView to be 200. Then set the imageView content mode to scaleAspectFill and clipsToBounds to true – Md. Ibrahim Hassan Oct 19 '18 at 09:32
  • I want scaling image without clipping and stretching as in second image – Baljinder Kamboj Oct 19 '18 at 09:32
  • @Md.IbrahimHassan I dont want to clip image.. this is useful but not completely – Baljinder Kamboj Oct 19 '18 at 09:38
  • width will be device size width - 50 and height will be 200 – Baljinder Kamboj Oct 19 '18 at 09:45
  • If you have a fixed frame for you image view then there is no way you can avoid clipping, stretching or aspect fitting images of different aspect ratios. You'll always have to choose one of the options. – Au Ris Oct 19 '18 at 09:52
  • how I get aspect fitting @AuRis – Baljinder Kamboj Oct 19 '18 at 10:01
  • Is it also not okay to dynamically change the height of the imageView, rather than keeping it constant at 200? – D V Oct 19 '18 at 10:02
  • keeping constant 200 height and width constant according to device width like device width - 50 – Baljinder Kamboj Oct 19 '18 at 10:04

2 Answers2

2

You won't be able to achieve aspect fitting of the image, filling all the whitespace, for a fixed height with a varying width.

One solution that you can have to display the image without cropping the whitespace, without having any whitespace, and keeping the image's aspect ratio intact is to keep the width varying for the UIImageView, and setting the aspect ratio constraint of the image, instead of setting the height constraint. The UIImageView would automatically enlargen and shrink based on the device width.

Add Aspect ratio constraint

Set the aspect ratio value to match your requirement

Don't forget to set the Content mode to Aspect Fit or Aspect Fill.

If you are using a UITableView to display the contents, you can use UITableViewAutomaticDimension to have dynamic heights for the cells, if that is what's limiting your UIImageView's height.

D V
  • 348
  • 2
  • 10
  • I want to fix uiimage size e.g. 20 px leading and 20 px trailing according to device width and 200 px height. image must be automatically responsive according to this size as mention in my question(2nd image) – Baljinder Kamboj Oct 19 '18 at 10:22
  • 1
    Practically, you CAN NOT display an image with a fixed height, and a varying width, within the same aspect ratio, without clipping any parts of the image. It HAS to have a dynamically varying height as mentioned in the answer, OR, it HAS to allow clipping parts of it, OR it HAS to have some whitespace which won't be filled by the image. – D V Oct 19 '18 at 10:27
1

Set for your imageView:

1) ClipsToBounds -> true

2) Content mode -> Aspect Fill (example)

enter image description here

But if you don't want to clip, you need to change the height of the cell depending on the width of the screen. Screen width:

let screenWidth = UIScreen.main.bounds.width
maxwell
  • 3,788
  • 6
  • 26
  • 40