There are several threads here on MR that discuss this topic, but, in short, you can put the image in it's own html page and either use an svg wrapper (my preferred method) or you can use css code similar to what you have above. If you are going to use the css you have above, I would reverse the width/height style to read:
img.portrait {
width: 100%;
height: auto;
}
It is difficult for some devices to determine to which "height" you refer...even though the standards say it's the height of the container... Some devices refer to the height of the <figure> or <div>, etc. some devices refer to the height of the screen or the "page".
Width is much more reliable. The above css will expand the image to the full screen width and then the height will adjust to keep the aspect ratio. Sometimes this causes the image height to grow larger than the screen so I also add the following as a catch-all:
img {max-width:100%; max-height:100%}
Cheers,