Есть несколько возможных способов получить желаемый результат. давайте обсудим некоторые из них
Вытягивание изображения по центру
Здесь мы просто потянем изображение к центру, хотя размер изображения будет таким же, как и сейчас. так что ваша li ширина - полная ширина, но изображение может быть в центре, если размер (ширина) изображения меньше.
примените нижеприведенное CSS к изображению внутри вашего li
.portfolio-list li a img
{
display: block;
margin: 0px auto;
}
установка изображения в качестве фона для вашего li> a
И еще, когда вы хотите, чтобы размер изображения совпадал с вашим li, лучше установить изображение в качестве фона, чем показывать его в виде элемента html внутри вашего li.
Таким образом, вы можете применить приведенную ниже CSS, убедитесь, что нам нужно установить background-image отдельно для каждого из ваших li. и может удалить img сторону элемента вашего li a.
.portfolio-list li a
{
background-repeat: no-repeat;
background-position: center;
background-size: cover;
height: 230px;
}
.portfolio-list li a.first
{
background-image: url('http://corey-dickinson.com/img/arcban2.jpg');
}
.portfolio-list li a.second
{
background-image: url('http://corey-dickinson.com/img/qcwide.png');
}
...
...
//And so on for other li.