将同一图像向左对齐，在监视器屏幕中与文本浮动，并在移动屏幕中远离文本居中。如何？

Question

我正在一个 HTML 文件中开发一篇响应式文章。

查看我的CSS和HTML例子，你可以看看是怎样的： http://jsfiddle.net/mnj0060e/1/

在任何监视器屏幕上，我都会将该图像向左对齐，与文本一起浮动。但是在任何移动屏幕上，图像都会变小，我不知道如何将相同的图像居中对齐，保持图像的大小，远离文本。例如：

我知道我应该使用 CSS 而不是 HTML，因为 HTML5 不支持 <img>，我会创建：

img {
height: 40%;
width: 40%;
float: left;
vertical-align: none;
}

@media (max-width: 600px) {
  img {
    width: auto;
    height: auto;
    float: center;
    vertical-align: none;
  }
}

问题是这个标签 img 适用于所有图像。我希望它适用于每一张图片。

Answer 1

对于您的尝试，如果它小于 600px，您可以更改样式，对于任何超过的样式，则使用 @media(min-width:600px) 以获得更大的尺寸。

@media(max-width:599px){//smaller than 600px
   img{
    height: 40%;
    width: 40%;
    float:left;
   }
}

@media(min-width:600px){}//600px and bigger

您使用的是 max-width:600px，因此适用于 600px 以下或等于 600px 的所有内容。如果您希望它适用于 600px 及以上，请使用 min-width:600px.

如果您只想让图像始终将文本向下推到其下方并始终占据屏幕中心，无论屏幕尺寸如何，只需执行以下操作。

#myImageId{
   display:block;
   margin:2px auto 2px auto;
}

有一种针对元素进行样式设置的幼稚方法。如果该元素有一个 id，您可以按如下方式定位该 id。

#this_is_my_img_id{
//great things are going to happen
}

或者您可以定位 class

.my_cool_img_class{
//just the facts
}

或属性

<img coolPic="true"/>

img[coolPic]{}

或

img[coolPic=true]{}

或者您可以根据位置select它

<div id="myCoolPost">
   <img />
   <img />
</div>

#myCoolPost img:nth-child(2){}

您还可以将它们组合在一起并遍历 dom

#myCoolPost .centerBlock:nth-child(2) img[hasCoolFactor]{}

将同一图像向左对齐，在监视器屏幕中与文本浮动，并在移动屏幕中远离文本居中。如何？

To align the same image to left, floating with the text in monitor screen, and to center, away from the text in mobile screen. How?

html

image

alignment

media-queries