Question

调整我在管理面板中设置的图片时遇到问题。

.users-list>li img {
    border-radius: 50%;
    max-width: 100%;
    height: auto;
    width: 100px;
    height: 100px;
}

当最大化时，图像看起来很棒：

如果我调整浏览器大小，它们会缩小：

然后我尝试删除height: 100px属性似乎可以解决这个问题，但是有一个图像出于某种原因关闭：

Answer 1

如果您不希望图像伸展，则应该固定一个尺寸并允许另一个尺寸为.OutterDiv{ position: relative; left: 0; top:0; } .OutterDiv .responsiveImage{ background-position: left top; background-image: url('address1'); background-repeat: repeat; position: relative; top: 0; left: 0; } .OutterDiv .nonResponsiveImage { background-position: left top; color: #FFF !important; background-image: url('address2'); background-repeat: no-repeat; margin-bottom: 0 !important; width: 960px; position:absolute; top: 0; left: 0; }。（这保留了图像的宽高比）

请参阅下面的示例，其中auto在width自动调整时保持不变：

＆＃13;

height

＆＃13;

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-width: 100%;
  width: 100px;
  height: 100px;
}
.correct img {
  max-width: 100%;
  width: 200px;
  height: auto;
}

＆＃13;

请参阅下面的示例，其中<div>This one stretches out:</div> <div class="incorrect"> <img src="http://placehold.it/150x50" /> </div> <div>This will preserve aspect ratio and look right:</div> <div class="correct"> <img src="http://placehold.it/150x50" /> </div>在height自动调整时保持不变：

＆＃13;

width

＆＃13;

img {
  display: block;
}
.correct,
.incorrect {
  border: 1px solid red;
  display: inline-block;
}
.incorrect img {
  max-height: 100%;
  height: 100px;
  width: 100px;
}
.correct img {
  max-height: 100%;
  height: 200px;
  width: auto;
}

＆＃13;

Answer 2

只需删除

import org.apache.hadoop.io.NullWritable

import org.apache.spark._
import org.apache.spark.SparkContext._

import org.apache.hadoop.mapred.lib.MultipleTextOutputFormat

class RDDMultipleTextOutputFormat extends MultipleTextOutputFormat[Any, Any] {
  override def generateFileNameForKeyValue(key: Any, value: Any, name: String): String =
    key.asInstanceOf[String]+"/aa"
}

object Split {
  def main(args: Array[String]) {
    val conf = new SparkConf().setAppName("SplitTest")
    val sc = new SparkContext(conf)
    sc.parallelize(List(("w", "www"), ("b", "blog"), ("c", "com"), ("w", "bt")))
      .map(value => (value._1, value._2 + "Test"))
      .partitionBy(new HashPartitioner(3))//.saveAsNewAPIHadoopFile(path, keyClass, valueClass, outputFormatClass, conf)
      .saveAsHadoopFile(args(0), classOf[String], classOf[String],
        classOf[RDDMultipleTextOutputFormat])
    sc.stop()
  }
}

即

height: 100px;

Answer 3

您还可以在height代码中使用<img>属性。

喜欢这个 <img src="/path/to/image" height="40">没有任何CSS

CSS图像调整大小问题

3 个答案: