Black stripes at the top and bottom of images

I’m using cordovaCamera plugin and when I’m taking a landscape picture the result is a picture with black strips at the bottom and top of it.

The only css applied to the image is width: 100% so I guess the css won’t be the solution.
When taking image portrait, it works just fine.

Here’s an example of the black stripes

Can you share the code you used for the camera?

Here’s the option initialization

 options = {
            quality: 50,
            destinationType: Camera.DestinationType.DATA_URL,
            sourceType: Camera.PictureSourceType.CAMERA,
            allowEdit: true,
            targetWidth: 640,
            targetHeight: 640,
            encodingType: Camera.EncodingType.JPEG,
            mediaType: 0,
            correctOrientation: false,
            saveToPhotoAlbum: false,
            popoverOptions: CameraPopoverOptions,
            cameraDirection: 1

The function:

 this.takePhoto = function() {
    var d = $q.defer();
    $cordovaCamera.getPicture(options).then(function(imageUri) {
      if (self.dp == "iOS") {
        selfie.image = imageUri;
    }, function(err) {
      if (err == "no camera available") {
      } else {
    return d.promise;

So these lines set the restraints for the height and width, try removing them.

I’ve removed this lines and I get the same result

Hmm, I just tried this out using some slightly different code

.controller('MainCtrl', function($scope, $cordovaCamera, $ionicPlatform) {
  $scope.lastPhoto = '';
  var options = {
    quality: 75,
    // sourceType: Camera.PictureSourceType.CAMERA,
    saveToPhotoAlbum: false
  $ionicPlatform.ready(function() {
    $scope.getPhoto = function() {
      $cordovaCamera.getPicture(options).then(function(imageData) {
        $scope.lastPhoto = imageData;
        console.log("data:image/jpeg;base64," + imageData);
      }, function(err) {});
      <button ng-click="getPhoto()" class="button button-block button-primary">Take Photo</button>
      <img class="photo" ng-src="{{lastPhoto}}">

  width: 100%;
  display: block;
  border: thin solid #eee

And I didn’t have the issue