Question

Подскажите пожалуйста, как сделать изображение более красивым и чтобы на нем было видно не размыто и не сжато

<div class="files-page-img">
<div class="images"><img src="$IMG_URL1$"></div>
</div>

 

 

.files-page-img {
 width: 250px;
 float: left;
 margin-right: 40px;
}

 

 

 

.images img{
 height: 250px;
 width: 250px;
 border-radius: 100%;
 transition:all .3s ease;
}

.images:hover img {
 transform:scale(1.25);
 transition: all .3s ease;
}

Answer 1

Вместо height:250px; пропишите height:auto!important;

Comments

Изображение становится "яйцом"

---

border-radius: 100%; сделайте 50%

---

webanet,

.images {
 float:center;
 height: 250px;
 width: 250px;
 border-radius: 100%;
 position:relative;
 overflow:hidden;
 transition: all .3s ease;
}

.images img {
 bottom:0;
 display:block;
 height:auto;
 left:0;
 margin:auto;
 position:absolute;
 right:0;
 top:0;
 width:100%;
}

.images:hover {
 transform:scale(1.25);
 transition: all .3s ease;
}

вот, удалось решить проблему