как добавить большое изображение в div с соотношением размеров - PullRequest
Новая
       0

как добавить большое изображение в div с соотношением размеров

0 голосов
/ 20 июня 2020

enter image description here

Я хочу добавить lo go в правый угол div

lo go размер большой, поэтому он имеет чтобы настроить существующую высоту div, а ширина должна быть пропорциональной

Я пробовал это, но это было неправильно, изображение слишком большое и испортило стиль

enter image description here

вот мой код 

<div style="border: solid;">
                <div>
                    <%--<img src="Images/logo.png" />--%>
                </div>
                <div style="display: flex; width: 100%;">
                    <div>
                        <asp:RadioButtonList ID="rdx1" runat="server" RepeatDirection="Horizontal">
                            <asp:ListItem Selected="True">Apple</asp:ListItem>
                            <asp:ListItem>Banana</asp:ListItem>
                            <asp:ListItem>Peach</asp:ListItem>
                            <asp:ListItem>Lemon</asp:ListItem>
                        </asp:RadioButtonList>
                    </div>
                    <div style="background-color: aqua; display: flex; flex: 1;">
                        <asp:TextBox runat="server" ID="txtRepText" Placeholder="Search Text" Width="100%" ></asp:TextBox>
                    </div>
                    <div>
                        <asp:Button ID="btn2" runat="server" Text="Search"  Font-Bold="true" />
                    </div>
                </div>
                <hr />
                <div>
                    <asp:CheckBox ID="cbx3" runat="server" Checked="true" Text="Red" />
                    <asp:CheckBox ID="cbx4" runat="server" Checked="true" Text="Yellow" />
                    <asp:CheckBox ID="cbx5" runat="server" Checked="true" Text="Green" />
                    <asp:CheckBox ID="cbx6" runat="server" Checked="true" Text="Blue" />
                    <asp:CheckBox ID="cbx7" runat="server" Checked="true" Text="Brown" />
                    <asp:CheckBox ID="cbx8" runat="server" Checked="true" Text="Pink" />
                </div>
            </div>
            <div>More controls</div>

</div>

как я могу это получить?

Ответы [ 3 ]

0 голосов
/ 20 июня 2020

Попробуйте следующий код: 

<div style="border: solid;width:100%;height:70px;border-width:1px;">
    <div style="width:70px;height:100%;float:left;">
        <image src="https://www.bubbleslearn.ir/wp-content/uploads/2020/01/bubbles.png" width="100%" height="100%" />
    </div>
    <div style="width:100%;height:10%;">
        <div style="float:left; width:40%;">
            <input type="radio" id="male" name="gender" value="male">
            <label for="male">Male</label>
            <input type="radio" id="female" name="gender" value="female">
            <label for="female">Female</label>
            <input type="radio" id="other" name="gender" value="other">
            <label for="other">Other</label>
        </div>
        <div style="background-color:green;float:left;width:50%">
            <input type="text" style="width:100%" value="Search">
        </div>
        <div style="float:right;">
            <input type="button" value="Search">
        </div>
        <br>
        <hr />
        <div style="width:80%;float:left;">
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label>
            <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
            <label for="vehicle1"> I have a bike</label>
        </div>
    </div>

Я пытался исправить проблемы с тегом div ...

Этот код не подходит для смартфонов и должен быть отзывчивый.

Ваши теги div установлены неправильно.

0 голосов
/ 20 июня 2020

Самый простой способ сделать это - использовать flexbox для позиционирования и объектно-подходящего изображения. см. код ниже 

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .wrapper{
      width: 120px;
      height: 120px;
    }
    .image{
      width: 100%;
      object-fit: cover;
    }
    .header{
      height: 200px;
      background-color: #ccc;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    }
  </style>
</head>
<body>
  <header class="header">
<div class="wrapper">
  <img class="image" src="https://image.shutterstock.com/image-photo/white-transparent-leaf-on-mirror-260nw-1029171697.jpg" alt="">
</div>
  </header>
</body>
</html>
0 голосов
/ 20 июня 2020

Этот фрагмент не очень хорошо разбирается в StackOverflow, но попробуйте следующее: 

.asmgx {
  display: inline-block;
  position: relative;
  width: 10%;
  height: 10%;
}
    <div style="border: solid;">
                    <div>
                        <%--<img src="https://miro.medium.com/max/1200/1*mk1-6aYaf_Bes1E3Imhc0A.jpeg" class="asmgx"/>--%>
                    </div>
                    <div style="display: flex; width: 100%;">
                        <div>
                            <asp:RadioButtonList ID="rdx1" runat="server" RepeatDirection="Horizontal">
                                <asp:ListItem Selected="True">Apple</asp:ListItem>
                                <asp:ListItem>Banana</asp:ListItem>
                                <asp:ListItem>Peach</asp:ListItem>
                                <asp:ListItem>Lemon</asp:ListItem>
                            </asp:RadioButtonList>
                        </div>
                        <div style="background-color: aqua; display: flex; flex: 1;">
                            <asp:TextBox runat="server" ID="txtRepText" Placeholder="Search Text" Width="100%" ></asp:TextBox>
                        </div>
                        <div>
                            <asp:Button ID="btn2" runat="server" Text="Search"  Font-Bold="true" />
                        </div>
                    </div>
                    <hr />
                    <div>
                        <asp:CheckBox ID="cbx3" runat="server" Checked="true" Text="Red" />
                        <asp:CheckBox ID="cbx4" runat="server" Checked="true" Text="Yellow" />
                        <asp:CheckBox ID="cbx5" runat="server" Checked="true" Text="Green" />
                        <asp:CheckBox ID="cbx6" runat="server" Checked="true" Text="Blue" />
                        <asp:CheckBox ID="cbx7" runat="server" Checked="true" Text="Brown" />
                        <asp:CheckBox ID="cbx8" runat="server" Checked="true" Text="Pink" />
                    </div>
                </div>
                <div>More controls</div>
    
    </div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...