我正在尝试构建一个应用程序，并且希望我的网站能够响应移动设备。
我想插入一个 Logo ，但我真的不知道该怎么做，如下图所示:
我希望图像位于蓝色框所在的位置。执行此操作的 HTML 标记是什么？
插入图像时，我希望调整图像大小并与页面的其余部分成比例。
这是我迄今为止创建的 View :
@model someModel.Models.LoginViewModel
<div class="row">
<div class="col-md-8 col-sm-12 col-xs-12">
<section id="loginForm">
@using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { @class = "form-horizontal", role = "form" }))
{
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<div class="form-group">
<div class="col-md-12">
@Html.TextBoxFor(m => m.UserName, new { @class = "form-control", @placeholder="USUÁRIO"})
</div>
</div>
<div class="form-group">
<div class="col-md-12">
@Html.PasswordFor(m => m.Password, new { @class = "form-control", @placeholder="SENHA" })
</div>
</div>
<div class="form-group">
<div class="col-sm-12 col-xs-12">
<button type="submit" class="btn btn-success btn-block">Entrar</button>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
<button type="submit" class="btn btn-primary btn-block" onclick="location.href='@Url.Action("Register", "Account")'">Ainda Não Tenho Conta</button>
</div>
</div>
<div class="form-group">
<div class="col-md-10 col-sm-12 col-xs-12 visible-sm visible-xs">
<button type="submit" class="btn btn-info btn-block">Esqueci Meu Usuário Ou Senha</button>
</div>
</div>
}
</section>
</div>
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
最佳答案
这里有一些事情。第一件事是插入图像。这可以通过 HTML 中的 img 标签来实现。这是为了实际插入图像，仅此而已。
第二部分是bootstrap包含的类。我不会谈论 col-md-12 因为您已经在使用它了。 text-center(内置于 Bootstrap 中)类会将图像按照您的请求居中放置在 div 的中间。
此处不需要的第三部分是 @Url.Content("path to image")，它是 razor 语法。本质上，这会在渲染时生成图像位置的物理地址。例如，我将在我的元素中创建一个名为 Images 的文件夹，该文件夹位于 C:\Users\SomeUser\Documents\Visual Studio 2013\Projects\MyProject\MyProject\Images\image .png，因此渲染为 Images\image.png。根据评论，更现实的版本是 @Url.Content("~/Images/image.png")。使用此选项的原因是，无论页面位于元素层次结构中的哪个位置，razor 语法都会确保它指向正确的位置。
第四部分是 alt="image" 属性，该属性使其符合 W3 标准。在基本层面上，这意味着如果图像不可用，则将提供替代图像的替代方案，即显示图像的一些文本。
最后是图像的类，它是img-responsive。这是一个内置的 Bootstrap 类，使图像能够响应浏览器大小的调整/不同的视口(viewport)大小。
将所有这些放在一起，我们最终得到一个代码块，该代码块应位于您的第一个输入上方，例如:
<div class="col-md-12 text-center">
<img src="@url.content("path to image")" alt="image" class="img-responsive" />
</div>
以下是答案的所有引用:
关于html - 使用 Twitter Bootstrap 将响应式图像插入 ASP.NET MVC5 元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30958624/