Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Stretch Image to Fit

Tags:

The src should stretch its width to match_parent, while keeping aspect ratio. When the image is larger than the parent, it scales down correctly. But when the image is smaller, it does not scale up. (illustration shows desired behavior).

enter image description here

<RelativeLayout     android:layout_width="match_parent"     android:layout_height="match_parent" >      <ImageView         android:id="@+id/banner"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:scaleType="fitCenter"         android:adjustViewBounds="true"         android:src="@drawable/foo"         />  </RelativeLayout> 


Using ScaleType.fitXY stretches the width only

like image 788
Matt Avatar asked Aug 20 '13 18:08

Matt


People also ask

How do I stretch a background image to fit?

When you work with background images, you may want an image to stretch to fit the page despite the wide range of devices and screen sizes. The best way to stretch an image to fit the background of an element is to use the CSS3 property, for background-size, and set it equal to cover.

How do I stretch an image to fit in a div?

Answer: Use the CSS max-width Property You can simply use the CSS max-width property to auto-resize a large image so that it can fit into a smaller width <div> container while maintaining its aspect ratio.

How do I stretch an image to fit in HTML?

If your image doesn't fit the layout, you can resize it in the HTML. One of the simplest ways to resize an image in the HTML is using the height and width attributes on the img tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.

How do I stretch a fit image in CSS?

You can use the CSS background-size: cover; to stretch and scale an image in the background with CSS only. This scales the image as large as possible in such a way that the background area is completely covered by the background image, while preserving its intrinsic aspect ratio.


1 Answers

I believe that is not possible, at least not with the options provided by scaleType attribute.
Your best option in this case is to use centerCrop, but only the center of the picture will be visible.

However, if you are not ok with this option, then you could scale the image programatically without loosing aspect ratio. In order to achieve this you'll need to calculate a scale factor based on the screen width, and then use this scale factor to know the new height of the image.

Like this:

ImageView imageView = (ImageView)findViewById(R.id.imageView); Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.foo);  int imageWidth = bitmap.getWidth(); int imageHeight = bitmap.getHeight();  int newWidth = getScreenWidth(); //this method should return the width of device screen. float scaleFactor = (float)newWidth/(float)imageWidth; int newHeight = (int)(imageHeight * scaleFactor);  bitmap = Bitmap.createScaledBitmap(bitmap, newWidth, newHeight, true); imageView.setImageBitmap(bitmap); 

Also, you'll need to adjust the declaration of ImageView in layout file:

<ImageView         android:id="@+id/imageView"         android:layout_width="wrap_content"         android:layout_height="wrap_content" /> 
like image 181
Andy Res Avatar answered Oct 02 '22 23:10

Andy Res