CSS: размер изображения увеличивается при просмотре телефона - PullRequest
Новая
       2

CSS: размер изображения увеличивается при просмотре телефона

0 голосов
/ 29 апреля 2020

на основе моего вопроса выше, ниже мой текущий дизайн, когда в веб-просмотре

enter image description here

На картинке выше, есть три круга, которые по горизонтали , Но когда я переключу его на вид телефона (в альбомной ориентации), он будет выглядеть примерно так:

enter image description here

Три круга становятся большими. Теперь, как исправить размер, чтобы он не стал больше?

Ниже мой текущий код: 

    <head>
        <style>

    .prolist {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;

    }

    .img2{

    border-radius: 50%;
    border-style: solid;
    border-color: #53bbeb;
    width: 60.2%;

    }

    .span1{

        font-weight: bold; 
        text-decoration: underline; 

    }

    .center {
    text-align: center;
    }

        @media screen and (max-width: 425px) {
        .prolist {
        width: 100%;
        display: flex;
            justify-content: center;
        flex-wrap: wrap;
        }

        .img2 {
            border-radius: 50%;
        border-style: solid;
        border-color: #53bbeb;
        flex-wrap: wrap;
        width: 30%;
        }

    }

        </style>
    </head>

<h3 class="title">Shareholders Return</h3>
<div class="clearfix">&nbsp;</div>
    <div class ="col10 paddingLR left">
        <a href="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" /></a>
    </div>
    <div class = "col2 paddingLR right">
        <div class="row center">

            <span class="span1">Additional Information on Stock Chart</span>

            <div class="clearfix">&nbsp;</div>

                <div class="item2" align="center">

                    <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
                    <a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>

                    <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
                    <a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>

                    <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
                    <a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>

                </div>


        </div>

    </div>

Ответы [ 2 ]

0 голосов
/ 29 апреля 2020

Я исправил проблему. Теперь размер в мобильном представлении не будет большим. 

 <html>
 <head>
    <style>

.prolist {
display: flex;
justify-content: space-between;
flex-direction: row;
width: 100%;
flex-wrap: wrap;

}

.img1{
width:92%;


}

.img2 {
 border-radius: 50%;
position: static;
border-style: solid;
border-color: #53bbeb;
width: 50%;
height: 50%;


}

.item2 {
width: 15%;
height: 100px;
margin-top: -600px;
margin-right: auto;
margin-left: 1px;
/* margin-bottom: 3000px; */
/* top: -100px; */
float: right;
}

.span1 {
font-weight: bold;
float: right;
width: 15%;
padding-top: px;
margin-top: -720px;
text-decoration: underline;
}

.center {
text-align: center;
}

    @media screen and (max-width: 425px) {
    .prolist {
    width: 100%;
    display: flex;
        justify-content: center;
    flex-wrap: wrap;
    }

    .img2 {
        border-radius: 50%;
    border-style: solid;
    border-color: #53bbeb;
    flex-wrap: wrap;
    width: 30%;
    }

}

    </style>
</head>
<Body>
<h3 class="title">Shareholders Return</h3>
<div class="clearfix">&nbsp;</div>
<div class ="col10 paddingLR left">
<a href="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png"><img class="img1" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" /></a>
</div>
<div class = "col2 paddingLR right">
    <div class="row center">

        <span class="span1">Additional Information on Stock Chart</span>

        <div class="clearfix">&nbsp;</div>

            <div class="item2" align="center">

                <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
                <a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>

                <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>
                <a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>

                <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
                <a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>

            </div>


    </div>

</div>
</Body>
</html>
0 голосов
/ 29 апреля 2020

Если вы хотите сделать его отзывчивым, вы можете использовать отзывчивый CSS фреймворк, такой как bootstrap. Вот bootstrap версия вашего кода: 

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        
<div class="row">
<h3 class="title">Shareholders Return</h3>
<div class="clearfix">&nbsp;</div>
    <div class ="col col-10 paddingLR left">
        <a href="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png"><img src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Shareprice_chart_ir.png" alt="" width="100%" height="100%" /></a>
    </div>
    <div class = "col col-2 paddingLR right">
        <div class="center">

            <span class="span1">Additional Information on Stock Chart</span>

            <div class="clearfix">&nbsp;</div>

                <div class="item2" align="center">

                    <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/Bursa Malaysia.JPG" alt=""/><br>
<a target="_blank" href="https://www.bursamalaysia.com/trade/trading_resources/listing_directory/company-profile?stock_code=7113"> Bursa</a><br><br>

<img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/SGX.JPG" alt=""/><br>

      <a target="_blank" href="https://www2.sgx.com/securities/equities/BVA"> SGX Link</a><br><br>

      <img class = "img2" src="/App_ClientFile/7ff8cb3f-fbf6-42e7-81da-6db6a0ab2ef4/Assets/ir/BNY Mellon.JPG" alt=""/><br>
          <a target="_blank" href="https://www.adrbnymellon.com/?cusip=890534100">U.S ADR</a>

</div>


        </div>

    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...