ภาพ CSS ปรับขนาดเปอร์เซ็นต์ของตัวเอง?

Question 1

ฉันกำลังพยายามปรับขนาด img ด้วยเปอร์เซ็นต์ของตัวมันเอง ตัวอย่างเช่นฉันต้องการลดขนาดรูปภาพลงครึ่งหนึ่งโดยปรับขนาดเป็น 50% แต่การนำไปใช้width: 50%;จะปรับขนาดรูปภาพเป็น 50% ขององค์ประกอบคอนเทนเนอร์ (องค์ประกอบหลักซึ่งอาจเป็น<body>ตัวอย่าง)

คำถามคือฉันสามารถปรับขนาดรูปภาพด้วยเปอร์เซ็นต์ของตัวมันเองโดยไม่ใช้ javascript หรือฝั่งเซิร์ฟเวอร์ได้หรือไม่? (ฉันไม่มีข้อมูลโดยตรงเกี่ยวกับขนาดภาพ)

ฉันค่อนข้างแน่ใจว่าคุณไม่สามารถทำสิ่งนี้ได้ แต่ฉันต้องการดูว่ามีโซลูชัน CSS ที่ชาญฉลาดเท่านั้นหรือไม่ ขอบคุณ!

Question 2

ฉันมี 2 วิธีสำหรับคุณ

วิธีที่ 1. สาธิต jsFiddle

วิธีนี้จะปรับขนาดรูปภาพให้มองเห็นได้เท่านั้นไม่ใช่ขนาดจริงใน DOM และสถานะภาพหลังจากปรับขนาดให้อยู่ตรงกลางของขนาดต้นฉบับ

html:

<img class="fake" src="example.png" />

css:

img {
  -webkit-transform: scale(0.5); /* Saf3.1+, Chrome */
     -moz-transform: scale(0.5); /* FF3.5+ */
      -ms-transform: scale(0.5); /* IE9 */
       -o-transform: scale(0.5); /* Opera 10.5+ */
          transform: scale(0.5);
             /* IE6–IE9 */
             filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.9999619230641713, M12=-0.008726535498373935, M21=0.008726535498373935, M22=0.9999619230641713,SizingMethod='auto expand');
}

เบราว์เซอร์สนับสนุนหมายเหตุ:cssสถิติแสดงให้เห็นว่าเบราว์เซอร์อินไลน์ใน

วิธีที่ 2. สาธิต jsFiddle

html:

<div id="wrap">
    <img class="fake" src="example.png" />
    <div id="img_wrap">
        <img class="normal" src="example.png" />
    </div>
</div>

css:

#wrap {
    overflow: hidden;
    position: relative;
    float: left;
}

#wrap img.fake {
    float: left;
    visibility: hidden;
    width: auto;
}

#img_wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#img_wrap img.normal {
    width: 50%;
}

หมายเหตุ: img.normalและimg.fakeเป็นภาพเดียวกัน
หมายเหตุการสนับสนุนเบราว์เซอร์:วิธีนี้ใช้ได้กับทุกเบราว์เซอร์เนื่องจากเบราว์เซอร์ทั้งหมดรองรับcssคุณสมบัติที่ใช้ในวิธีการ

วิธีการทำงานในลักษณะนี้:

#wrapและ#wrap img.fakeมีการไหล
#wrapมีoverflow: hiddenขนาดเท่ากับภาพภายใน ( img.fake)
img.fakeเป็นองค์ประกอบเดียวที่อยู่ภายใน#wrapโดยไม่ต้องabsoluteวางตำแหน่งเพื่อที่จะไม่ทำลายขั้นตอนที่สอง
#img_wrapมีการabsoluteวางตำแหน่งภายใน#wrapและขยายขนาดให้กับองค์ประกอบทั้งหมด ( #wrap)
ผลลัพธ์ของขั้นตอนที่สี่คือ#img_wrapมีขนาดเท่ากับภาพ
โดยการตั้งค่าwidth: 50%เกี่ยวกับimg.normalขนาดของมันคือ50%ของ#img_wrapและดังนั้นจึง50%ของขนาดของภาพเดิม

Question 3

HTML:

<span>
    <img src="example.png"/>
</span>

CSS:

span {
    display: inline-block;
}
img {
    width: 50%;
}

นี่จะเป็นหนึ่งในวิธีแก้ปัญหาที่ง่ายที่สุดโดยใช้แนวทางองค์ประกอบคอนเทนเนอร์

เมื่อใช้แนวทางองค์ประกอบคอนเทนเนอร์คำถามนี้เป็นรูปแบบของคำถามนี้ เคล็ดลับคือให้องค์ประกอบคอนเทนเนอร์ย่อขนาดรูปภาพย่อยดังนั้นจึงมีขนาดเท่ากับรูปภาพที่ไม่มีขนาด ดังนั้นเมื่อตั้งค่าwidthคุณสมบัติของรูปภาพเป็นค่าเปอร์เซ็นต์รูปภาพจะถูกปรับขนาดให้สัมพันธ์กับมาตราส่วนดั้งเดิม

บางส่วนของคุณสมบัติ shrinkwrapping เปิดใช้งานอื่น ๆ และค่าทรัพย์สินคือfloat: left/right, position: fixedและmin/max-widthเป็นที่กล่าวถึงในคำถามที่เชื่อมโยง แต่ละคนมีผลข้างเคียงของตัวเอง แต่display: inline-blockจะเป็นทางเลือกที่ปลอดภัยกว่า แมตต์ได้กล่าวถึงfloat: left/rightในคำตอบของเขา overflow: hiddenแต่เขาผิดมาประกอบมัน

สาธิต jsfiddle

แก้ไข: ดังที่โทรจันกล่าวถึงคุณยังสามารถใช้ประโยชน์จากโมดูลการปรับขนาด CSS3 ภายในและภายนอกที่เพิ่งเปิดตัวได้ :

HTML:

<figure>
    <img src="example.png"/>
</figure>

CSS:

figure {
    width: intrinsic;
}
img {
    width: 50%;
}

แต่ไม่ทุกรุ่นเบราว์เซอร์ยอดนิยมสนับสนุนมันในช่วงเวลาของการเขียน

Question 4

ลองใช้zoomคุณสมบัติ

<img src="..." style="zoom: 0.5" />

แก้ไข: เห็นได้ชัดว่า FireFox ไม่รองรับzoomคุณสมบัติ คุณควรใช้;

-moz-transform: scale(0.5);

สำหรับ FireFox

Question 5

อีกวิธีหนึ่งคือการใช้:

<img srcset="example.png 2x">

จะไม่ตรวจสอบความถูกต้องเนื่องจากsrcจำเป็นต้องใช้แอตทริบิวต์ แต่ใช้งานได้ (ยกเว้นใน IE เวอร์ชันใดก็ได้เนื่องจากsrcsetไม่รองรับ)

Question 6

สิ่งนี้เป็นไปได้จริงและฉันได้ค้นพบว่าเกิดขึ้นได้อย่างไรในขณะที่ออกแบบไซต์การออกแบบที่ตอบสนองขนาดใหญ่แห่งแรกของฉัน

<div class="wrapper">
  <div class="box">
    <img src="/logo.png" alt="">
  </div>
</div>

.wrapper { position:relative; overflow:hidden; }

.box { float:left; } //Note: 'float:right' would work too

.box > img { width:50%; }

overflow: hidden ให้ความสูงและความกว้างของกระดาษห่อหุ้มแม้จะมีเนื้อหาลอยอยู่โดยไม่ต้องใช้การแฮ็ก clearfix จากนั้นคุณสามารถวางตำแหน่งเนื้อหาของคุณโดยใช้ระยะขอบ คุณยังสามารถทำให้ wrapper div เป็นอินไลน์บล็อกได้

Question 7

นี่เป็นเธรดเก่ามาก แต่ฉันพบมันในขณะที่ค้นหาวิธีง่ายๆในการแสดงการจับภาพหน้าจอเรตินา (ความละเอียดสูง) บนจอแสดงผลความละเอียดมาตรฐาน

ดังนั้นจึงมีวิธีแก้ปัญหาเฉพาะ HTML สำหรับเบราว์เซอร์สมัยใหม่:

<img srcset="image.jpg 100w" sizes="50px" src="image.jpg"/>

นี่เป็นการบอกเบราว์เซอร์ว่ารูปภาพมีขนาดเป็นสองเท่าของขนาดที่ต้องการแสดง ค่าเป็นสัดส่วนและไม่จำเป็นต้องแสดงขนาดจริงของรูปภาพ สามารถใช้ 2w 1px ได้เช่นกันเพื่อให้ได้เอฟเฟกต์เดียวกัน แอตทริบิวต์ src ถูกใช้โดยเบราว์เซอร์เดิมเท่านั้น

เอฟเฟกต์ที่ดีของมันคือการแสดงขนาดเดียวกันบนเรตินาหรือจอแสดงผลมาตรฐานโดยจะหดตัวลงในส่วนหลัง

Question 8

function shrinkImage(idOrClass, className, percentShrinkage){
'use strict';
    $(idOrClass+className).each(function(){
        var shrunkenWidth=this.naturalWidth;
        var shrunkenHeight=this.naturalHeight;
        $(this).height(shrunkenWidth*percentShrinkage);
        $(this).height(shrunkenHeight*percentShrinkage);
    });
};

$(document).ready(function(){
    'use strict';
     shrinkImage(".","anyClass",.5);  //CHANGE THE VALUES HERE ONLY. 
});

โซลูชันนี้ใช้ js และ jquery และปรับขนาดตามคุณสมบัติของรูปภาพเท่านั้นไม่ใช่ในพาเรนต์ สามารถปรับขนาดภาพเดียวหรือเป็นกลุ่มโดยใช้พารามิเตอร์คลาสและรหัส

สำหรับข้อมูลเพิ่มเติมไปที่นี่: https://gist.github.com/jennyvallon/eca68dc78c3f257c5df5

Question 9

นี่เป็นแนวทางที่ไม่ยาก:

<div>
    <img src="sample.jpg" />
</div>

then in css:
div {
    position: absolute;
}

img, div {
   width: ##%;
   height: ##%;
}

Question 10

ที่จริงที่สุดของคำตอบที่นี่ไม่ได้โดดขนาดภาพตามความกว้างของตัวเอง

เราจำเป็นต้องมีความกว้างและความสูงของimgองค์ประกอบอัตโนมัติเพื่อให้เราสามารถเริ่มต้นด้วยขนาดดั้งเดิมได้

หลังจากนั้นองค์ประกอบคอนเทนเนอร์สามารถปรับขนาดภาพให้เราได้

ตัวอย่าง HTML อย่างง่าย:

<figure>
    <img src="your-image@2x.png" />
</figure>

และนี่คือกฎ CSS ฉันใช้คอนเทนเนอร์แบบสัมบูรณ์ในกรณีนี้:

figure {
    position: absolute;
    left: 0;
    top: 0;
    -webkit-transform: scale(0.5); 
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5); 
    -o-transform: scale(0.5);
    transform: scale(0.5);
    transform-origin: left;
} 

figure img {
    width: auto;
    height: auto;
}

คุณสามารถปรับแต่งการวางตำแหน่งภาพด้วยกฎเช่นtransform: translate(0%, -50%);.

Question 11

ฉันคิดว่าคุณพูดถูกมันเป็นไปไม่ได้กับ CSS บริสุทธิ์เท่าที่ฉันรู้ (ฉันหมายถึงข้ามเบราว์เซอร์)

แก้ไข:

โอเคฉันไม่ชอบคำตอบของฉันมากฉันเลยแอบงงเล็กน้อย ฉันอาจพบความคิดที่น่าสนใจซึ่งช่วยได้ .. บางทีมันอาจจะเป็นไปได้ (แม้ว่าจะไม่ใช่สิ่งที่สวยที่สุดเท่าที่เคยมีมา):

แก้ไข: ทดสอบและทำงานใน Chrome, FF และ IE 8 & 9 . มันไม่ทำงานใน IE7

ตัวอย่าง jsFiddle ที่นี่

html:

<div id="img_wrap">
    <img id="original_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    <div id="rescaled_img_wrap">
        <img id="rescaled_img" src="http://upload.wikimedia.org/wikipedia/en/8/81/Mdna-standard-edition-cover.jpg"/>
    </div>
</div>

css:

#img_wrap {
    display: inline-block;       
    position:relative;    
}

#rescaled_img_wrap {
    width: 50%;
}
#original_img {
    display: none;
}
#rescaled_img {
    width: 100%;
    height: 100%;
}