Блог

Главная - Вопросы по программированию - как связать svg-изображения, не исчезая?

как связать svg-изображения, не исчезая?

#html #css

Вопрос:

я пытаюсь связать свои svg-изображения, но как только я добавляю тег, они исчезают.

HTML — с помощью этого кода они показывают

 <section class="contact" id="contact">
    <div class="content">
        <img src="assets/images/gmail.svg" alt="">
        <img src="assets/images/github.svg" alt="">
        <img src="assets/images/linkedin.svg" alt="">
    </div>
</section>

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

Но если я добавлю тег a, они перестанут исчезать

 <a href="randomsite.com">
    <img src="assets/images/gmail.svg" alt="">
</a>

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

CSS

 .content{
  display: flex;
  justify-content: space-between;
}
.contact .content img{
  max-width: 32%;
}

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

1. дайте высоту изображения, это сработает.

2. спасибо, что это сработало. Мне пришлось добавить высоту с px, потому что, если я добавлю%, она все равно не будет отображаться.

3. Если вы даете высоту с %, она принимает высоту, учитывая, что она родительская. В этом случае родителем a является встроенный элемент, и по умолчанию его высота равна 0. Так что его не видно. Пожалуйста, изучите inline, inline-block and block элемент уровня.

4. О, я вижу, теперь я знаю о росте родителей, спасибо, братан, и уверен, что буду продолжать практиковаться.

Ответ №1:

Вы пытаетесь придать 32% максимальной ширины изображению внутри неблочного тега (ваш тег <a…>), это означает, что если ваш тег не имеет размера, изображение, содержащееся на нем, будет иметь максимальную ширину 32% от нуля.

Итак… вам нужно указать ширину тега ссылки, а затем настроить изображение внутри.

Изображения без ссылки:

 .contact .content > img{
  max-width: 32%;
}

Ссылки и их изображения:

 .contact .content a {
  width: 32%; /* <--Line added on edit */
  max-width: 32%;
  display: block;
}
.contact .content a img {
  max-width: 100%;
  height: auto;
}

 
 .content{
  display: flex;
  justify-content: space-between;
}
.contact .content > img {
  max-width: 32%;
  height: auto;
}
.contact .content a {
  width: 32%; /* <--Line added on edit */
  max-width: 32%;
  display: block;
}
.contact .content a img {
  max-width: 100%;
  height: auto;
} 
 <section class="contact" id="contact">
    <div class="content">
        <a href=""><img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2018/240/iconmonstr-gmail-1.png" alt=""></a>
        <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-github-1.png" alt="">
        <img src="https://cdns.iconmonstr.com/wp-content/assets/preview/2012/240/iconmonstr-linkedin-3.png" alt="">
    </div>
</section>

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

1. это на меня не действует. Изображения не отображаются. Но если я дам высоту в пикселе, это будет видно.

2. @DiegoDonoso Я добавил тест к своему ответу. У меня нет ваших изображений на svg, но я почти уверен, что это должно сработать

3. видишь, братан ibb.co/9Yst4J7 , это не работает на меня. Это мой нижний колонтитул pastebin.com/DcpitXLa

4. @DiegoDonoso… я пересмотрел свой ответ и попробовал его с файлами svg, и вы были правы, я упустил одну деталь. Проверьте еще раз и внимательно посмотрите на » С помощью этого решения вам не придется указывать фиксированную высоту. Надеюсь, на этот раз я попал в точку, если нет… пожалуйста, дайте мне знать, и я попробую еще раз (да, это личное 😀 ).

Метки: ,