Parallax background won't orient a portrait any way other than on it's side - css

Question

I have an image that I'm trying to use for my initial parallax styled background that won't change orientation. It's the proper aspect ratio for a portrait, but no way I edit the code or the image itself it won't stop turning.
I've tried using translate code in my css, and I've tried the whole z-index and webkit lines and I eventually learned that those wouldn't work anyways. I don't know what else to try.
.parallax1 {
/* The image used */
background-image: url("me.jpg");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
The expected outcome is supposed to be landscape oriented version of a portrait of me. The aspect ratio is correct for this type of image but the photo still stretches and turns portrait.

Answer 1

You might want to create a JSFiddle to demonstrate this, but it's most likely your background-size: cover; value for background property ensures that the image will fill your whole container while preserving the aspect ratio. Because you only defined a height on your container your width is naturally "100%" (because divs are block elements). If your viewport or the container's parent ends up more wide than narrow so will your background image:
https://jsfiddle.net/w4x3bq61/
One way you can tackle this is to set the width of .parallax1 as well so it always have a taller height vs width such as:
.parallax1 {
/* The image used */
background-image: url("");
/* Set a specific height */
height: 600px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 300px;
}