How to properly and proportionally to display photos?

Hello. When creating a blog arose the need for proper cropping of the photo. Sometimes the image is well suited, and sometimes the right part is hiding. How to crop photos and what about vertical images?
My css:
article > a > img:hover{
 transform: scale(1.2);
 cursor: pointer;
 transition-timing-function: cubic-bezier(0,0,.58,1);
.article> a img {
 transition: all .3s ease;
.article-image {
 object-fit: cover;
 width: 105%;
 height: 100%;
 top: 0;
 margin: 0 auto;
 padding: 0;
 display: block;
 position: relative;
 z-index: 1;

HTML article
@foreach($articles as $i => $article)
 <article class="article @if($i == 0) fullSize col-md-12 @else 'col-md-4 @endif">
 @include('articles.the partials.article-preview', [
 'article' => $article,
 'isMain' => $i === 0

articles.the partials.article-preview
<a href="{{ url('/news', $article->slug) }}"><img class="article-image" src="/uploads/articleImages/{{$article->article_wall}}" alt="{{ $article->title }}"></a>
<div class="article-description">
 <h3><a href="{{ url('/news', $article->slug) }}">{{ $article->title }}</a></h3>
 <time datetime="{{$article->published_at}}"><span class="glyphicon glyphicon-time"></span>{{$article->getBeautifulDateAttribute()}}</time>
 @can('Edit Post')
 <a class="admin btn btn-primary btn-xs" href="{{url('news/'.$article->id.'/edit')}}">Edit</a>
 @can('Delete Post')
 {!! Form::open(['url' => 'news/'.$article->id, 'action' => 'ArticlesController@destroy', 'method' => 'DELETE', 'class' => 'admin button'])!!}
 {!! Form::token() !!}
 {!! Form::submit('Delete',
 'class' => 'btn btn-danger btn-xs 'confirm',
 'onclick' => 'return confirm("Delete article?")'
 {!! Form::close() !!}

June 14th 19 at 18:54
2 answers
June 14th 19 at 18:56
Complementing the answer : in order to prolong the life of the mouse and to prevent the curse in the direction of "fucking technology" - attach to admin this wonderful plugin
June 14th 19 at 18:58
How to crop photos

photo cutting in photoshop, css had not yet been invented neural networks recognize significant areas of the photo.

and what about vertical images?

Or as well as horizontal - to cut a significant part in photoshop to the desired format, sacrificing detail or how to do vertical video - add some abstract background/blurred double image, anyways the art of song and dance, or, if your blog is somehow maintained, in advance to do a photo for the blog in the right orientation. Is nothing else the human genius did not come up.

Find more questions by tags CSSHTML