Блог

Главная - Вопросы по программированию - Изменение размера изображения в файле css

Изменение размера изображения в файле css

#css

#css

Вопрос:

Я получил файл css, как показано ниже. Обычно я ссылаюсь на привязку в html, а затем форматирую с помощью css, однако я вижу, что здесь файл размещается с использованием файла css.

Мне удалось изменить файл логотипа на наш логотип, однако теперь мне нужно изменить размер логотипа, поскольку он слишком большой.

CSS

 #header {
  display: block;
  background: #446e9b;
  color: white;
}
#header::after {
  clear: both;
  content: "";
  display: table;
}
#header h1 {
  margin: 0;
  font-size: 1.5em;
  color: white;
  font-weight: 400;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  position: relative;
  padding-left: 3.8em;
  z-index: 0;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
#header .home {
  display: block;
  width: 3em;
  height: 100%;
  border-right: 1px solid #395c82;
  border-left: 1px solid #395c82;
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.15), -1px 0 0 rgba(255, 255, 255, 0.15);
  position: absolute;
  top: 0;
  left: 1px;
  padding: 0.2em;
  text-align: center;
}
#header .home:before {
/* content: url(../images/logo.svg); */
  content: url(/images/logo.png);
}
#header .home:hover, #header .home:active {
  background: rgba(71, 77, 87, 0.5);
}
#header #quick-search {
  position: relative;
  top: 0.65em;
  z-index: 5;
  -webkit-animation: fadeIn 1s;
  -moz-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
#header #quick-search .icon-search:before {
  z-index: 5;
  position: absolute;
  left: 2.4em;
  top: 0.2em;
  color: #474d57;
}
#header #quick-search #q {
  margin-left: 1em;
  padding-left: 2em !important;
  border-color: rgba(71, 77, 87, 0.5);
  padding: 0.4em;
  width: 10em;
  background: rgba(71, 77, 87, 0.3);
  box-shadow: none !important;
  position: relative;
  z-index: 0;
  color: rgba(255, 255, 255, 0.8);
}
#header #quick-search #q:active, #header #quick-search #q:focus {
  color: #333333;
  background: white;
  width: 15em;
}
#header a, #header .icon-add.checklist-new-only, #header a:hover, #header .icon-add.checklist-new-only:hover, #header a:active, #header .icon-add.checklist-new-only:active, #header a:focus, #header .icon-add.checklist-new-only:focus {
  color: white;
}
#header .select2-container {
  margin-left: 1em;
}
#header .select2-container .select2-chosen {
  font-size: 0.9em;
  color: rgba(255, 255, 255, 0.8);
}
#header .select2-container .select2-choice {
  background: rgba(71, 77, 87, 0.3);
  border-color: rgba(71, 77, 87, 0.5);
  box-shadow: none !important;
  height: 2.2em;
}
#header .select2-container .select2-arrow {
  border-color: rgba(71, 77, 87, 0.5);
}

HTML

 <div id="header">

    <a href="#" class="mobile-toggle-button js-flyout-menu-toggle-button"></a>

    <% if User.current.logged? || !Setting.login_required? %>
    <div id="quick-search">
        <%= form_tag({:controller => 'search', :action => 'index', :id => @project}, :method => :get ) do %>
        <%= hidden_field_tag(controller.default_search_scope, 1, :id => nil) if controller.default_search_scope %>
        <label for='q'>
          <%= link_to l(:label_search), {:controller => 'search', :action => 'index', :id => @project}, :accesskey => accesskey(:search) %>:
        </label>
        <%= text_field_tag 'q', @question, :size => 20, :class => 'small', :accesskey => accesskey(:quick_search) %>
        <% end %>
        <%= render_project_jump_box %>
    </div>
    <% end %>

    <h1><%= page_header_title %></h1>
    <% if display_main_menu?(@project) %>
    <div id="main-menu" class="tabs">
        <%= render_main_menu(@project) %>
        <div class="tabs-buttons" style="display:none;">
            <button class="tab-left" onclick="moveTabLeft(this); return false;"></button>
            <button class="tab-right" onclick="moveTabRight(this); return false;"></button>
        </div>
    </div>
    <% end %>
</div>

Комментарии:

1. Некоторая разметка была бы полезна.

2. Вопрос не ясен, лучше добавить свою разметку (html) тоже

Ответ №1:

Я предполагаю, что это рассматриваемый код:

 #header .home:before {
/*content: url(../images/logo.svg);*/
  content: url(/images/logo.png);
}

Чтобы изменить его размер, вы могли:

 #header .home:before {
  content: '';

  background-image: url('/images/logo.png');
  background-size: ...;
}

Кроме того, ваш вопрос совершенно неясен.

Комментарии:

1. Ранее я пытался использовать width amp; height, как было предложено, но это не сработало.

2. Затем используйте background-image .

3. Я в замешательстве. Как вы предложили использовать width, почему это не работает?

4. Не обращайте внимания на первый метод. В вашем случае это не сработает. Вы не сможете изменить размер изображения, если используете content: url() . Вместо этого используйте, background-image: url() как я предложил. content: '' должен быть установлен для отображения псевдоэлемента. Затем используйте background-size: % для изменения размера изображения.