调整较小的图像，使其适合跨越单词

Question

我试图在同一行

中生成一个图像和一些句子

如上所示它看起来像那样。我希望图像紧挨着图像的信息。所以它不会占用太多空间。

@foreach (var m in Model.Matches)
{ 
    <div class="row-fluid" style="border: 1px solid blue; padding: 10px">
    <div class="span2" style="border: 1px solid red; padding: 10px">
    <img src="@m.Photo.PhotoURL" class="img-responsive" @*style="max-height:175px;max-width:100px;"*@/>
    </div>
    <div class="span2" style="border: 1px solid black; padding: 10px">
     <h5>@m.Username</h5>
     <h5>@m.Age year old @m.Gender.WhatGender | Seeking</h5>
     <h5>@m.City, @m.State.Name,@m.State.Country.Name</h5>
    </div>
    </div>
     <hr />
}

以上代码生成带有信息的图像。我不知道要包括什么，使它在左侧的图像足够小，信息适合它的右侧。我也使用bootstrap。

Answer 1

你可以尝试这样的事情（你没有提到过响应能力）

<强> HTML：

<div class="span2 info" style="border: 1px solid black; padding: 10px">
    <img src="" /> 
    <div class=" span2 info_text">
       <h5>Username</h5>
       <h5>Age year old Seeking</h5>
       <h5>City, State.Country Name</h5>
    </div>
</div>

CSS：（将这些css代码添加到您自己的css文件中）

.info img{
    width:150px;
    height:150px;
    float:left;
}

.info_text{
    border: 1px solid black;
    padding: 10px;
    display:inline-block;
    margin:0 0 0 20px;
}

EXAMPLE.

注意：另外，如果您使用的是responsive模板，请确保使用multiple media-queries或bootstrap way根据设备调整图片大小