html - Bigcartel 中的居中图像

标签 html css web bigcartel

在我的网站上 here我有一张最初为 2315∆×∆3274 的图片。我想做的是让图片在每台设备上居中,到目前为止,我已经让我的图片在我的笔记本电脑上居中,但是在我的桌面上看它时它不是完全居中。水平居中是首选,但水平和垂直都是最好的结果。这是代码

谢谢

#1 .page {
    margin: 0 auto;
}
<p>
<a href="/2"><br>
  <img style="width:100%;margin:0 auto;max-width: 3274px;display:block;margin-right: -150px" src="https://i.imgsafe.org/bdd0c10a55.jpg" alt="1"><br>
</a>
</p>

最佳答案

将图像设置为背景会更容易。 在<img ... />的地方添加以下内容:

HTML

<div class="img-responsive"></div>

CSS

.img-responsive{ background: url('https://i.imgsafe.org/bdd0c10a55.jpg') no-repeat center top; background-attachment: relative; background-position: center; width: 100%; height:100%;/* or any that you want */ /*-webkit-background-size: 90%; can be used to control the image size*/ }

关于html - Bigcartel 中的居中图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38226447/

相关文章:

javascript - 如何创建字典 [Key : value] in jQuery

javascript - 如何显示显示为 : none in a CSS rule? 的元素

html - 渲染速度最慢的是什么,通过绝对定位绘制的单独图像,还是完整图像?

html - 如何在按钮文本上添加渐变颜色?

javascript - Stimulsoft marginsPx[i].replace 不是 MVC5 中的函数 JavaScript 错误?

html - 为什么我的网页上方有空格?

css - 在 "quotes"中的 HTML 数据属性中使用 LESS 变量

css - 应用 css3 缩放属性后,谷歌地图图钉点击不起作用

CSS颜色参数转义ID

javascript - 如何在单个播放器中播放多个 YouTube 视频。