0

.logo img {
  width: 240px;
}
<div class="gcontainer2 wpm">
  <a href="/" class="logo">
    <img src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png" alt>
  </a>
  <ul class="topmenu search">
    <li class="allmenu menu1"><a href="">HOME</a></li>
    <li class="allmenu menu2"><a href="">WHO WE ARE</a></li>
    <li class="allmenu menu3"><a href="">OUR SERVICES</a></li>
    <li class="allmenu menu4"><a href="">CAREERS</a></li>
    <li class="allmenu menu5"><a href="">CONTACT US</a></li>
    <img src="images/search.png" alt="search">
  </ul>
</div>

введите сюда описание изображения

введите сюда описание изображения

На первом изображении можно заметить, что логотип немного размылен, хоть его изначальное разрешение в 2 раза больше.

На втором — смотрится идеально, но его первичное разрешение не изменилось. Что можете посоветовать, чтобы логотип смотрелся аккуратно как на больших, так и на маленьких разрешениях? Помимо векторного формата.

6
  • 580/250 не ровно 231/100, из за этого и "мылится"... 27 июл 2017 в 5:39
  • Тоже так сначала думал. Но даже если задавать размер по одной стороне, всё равно результат аналогичный. 27 июл 2017 в 5:44
  • используете transform?, покажите код.. 27 июл 2017 в 6:03
  • Добавил код - самый обычный. transform использую, но в других местах на сайте 27 июл 2017 в 6:27
  • поможет image-rendering caniuse.com/#search=image-rendering 27 июл 2017 в 6:45

1 ответ 1

0

Вот, разные варианты уменьшения:

body{text-align:center}
.img1 {
  width: auto;
}

.img2 {
  width: 240px;
}

.img3{
  width: 240px;
  height:96px;
  display: inline-block;
  background:url(https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png)no-repeat 0 0 / cover
} 

.img4{
  width: 240px;
  -webkit-filter: contrast(1.25);
  filter: contrast(1.25);
}

.img5{
  transform: scale(.413793);
}
<img class="img1" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png">
<br>
<img class="img2" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png">
<br>
<span class="img3"></span>
<br>
<img class="img4" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png">
<br>
<img class="img5" src="https://s8.hostingkartinok.com/uploads/images/2017/07/7afaacac7f82f66fe4070ccddce9dc09.png">

Самый четкий, на мой взгляд, с добавлением контраста.

Или все же лучше использовать svg для таких вещей.

1
  • 1
    Вариант с добавлением image-rendering: -webkit-optimize-contrast; всё-таки лучше справляется. Спасибо! 27 июл 2017 в 7:25

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.